IconButton

Use an IconButton when you need to provide an action for a user to take in a compact space.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { IconButton } from '@adaptavant/eds-core';

Variants​

The Button is available in 9 variants, accentPrimary is the default.

{/* accentPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="accentPrimary"
/>

{/* neutralPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="neutralPrimary"
/>

{/* accentSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="accentSecondary"
/>

{/* neutralSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="neutralSecondary"
/>

{/* neutralSecondaryIntense */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="neutralSecondaryIntense"
/>

{/* criticalPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="criticalPrimary"
/>

{/* neutralTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="neutralTertiary"
/>

{/* criticalTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="criticalTertiary"
/>

{/* inversePrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  variant="inversePrimary"
/>
View in Playroom

Icon​

Customise the icon for the button via the icon prop.

{/* CheckIcon */}
<IconButton
  aria-label="Click me!"
  icon={CheckIcon}
  variant="accentPrimary"
/>

{/* InformationIcon */}
<IconButton
  aria-label="Click me!"
  icon={InformationIcon}
  variant="neutralTertiary"
/>

{/* WarningIcon */}
<IconButton
  aria-label="Click me!"
  icon={WarningIcon}
  variant="criticalTertiary"
/>

{/* ErrorIcon */}
<IconButton
  aria-label="Click me!"
  icon={ErrorIcon}
  variant="criticalPrimary"
/>
View in Playroom

Size​

Customise the size of the button via the size prop. Defaults to "standard".

{/* xLarge */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  size="xLarge"
  variant="accentPrimary"
/>

{/* large */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  size="large"
  variant="accentPrimary"
/>

{/* standard */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  size="standard"
  variant="accentPrimary"
/>

{/* small */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  size="small"
  variant="accentPrimary"
/>
View in Playroom

Disabled​

Use the disable prop to show that a button isn’t usable.

{/* accentPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="accentPrimary"
/>

{/* neutralPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="neutralPrimary"
/>

{/* neutralSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="neutralSecondary"
/>

{/* neutralSecondaryIntense */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="neutralSecondaryIntense"
/>

{/* criticalPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="criticalPrimary"
/>

{/* accentSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="accentSecondary"
/>

{/* neutralTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="neutralTertiary"
/>

{/* criticalTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="criticalTertiary"
/>

{/* inversePrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isDisabled
  variant="inversePrimary"
/>
View in Playroom

Loading​

The icon is hidden and a loading indicator is shown in its place.

{/* accentPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="accentPrimary"
/>

{/* neutralPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="neutralPrimary"
/>

{/* neutralSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="neutralSecondary"
/>

{/* neutralSecondaryIntense */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="neutralSecondaryIntense"
/>


{/* criticalPrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="criticalPrimary"
/>

{/* accentSecondary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="accentSecondary"
/>

{/* neutralTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="neutralTertiary"
/>

{/* criticalTertiary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="criticalTertiary"
/>

{/* inversePrimary */}
<IconButton
  aria-label="Click me!"
  icon={AddIcon}
  isLoading
  variant="inversePrimary"
/>
View in Playroom

API Reference​

IconButton

PropDefaultDescription
variant?'accentPrimary''accentPrimary' | 'accentSecondary' | 'criticalPrimary' | 'criticalTertiary' | 'inversePrimary' | 'neutralPrimary' | 'neutralSecondary' | 'neutralSecondaryIntense' | 'neutralTertiary'
Variant of the button.
size?'standard''xLarge' | 'large' | 'standard' | 'small'
Size of the button.
icon_Icon
Set the Icon for the button.
loadingLabel?_Icon
Text to read out to assistive technologies when button is loading
isDisabled?falseboolean
If true, the button is disabled.
isLoading?falseboolean
If true ,the button will display a loading indicator.
isPressed?_boolean
If true, the button will be visually styled as pressed and the aria-pressed attribute will be set accordingly.
type?button'button' | 'submit' | 'reset'
Specifies the button type.
id?_string
Specifies a unique id for the button.
aria-label_string
Describes the component to assistive tech users and the action or effect that will take place when the button is clicked.
aria-controls?_string
Identifies the element (or elements) that the button controls.
aria-expanded?falseboolean
Indicates whether the button, or another element that it controls, is currently expanded or collapsed.
aria-haspopup?_boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
Indicates the availability and type of interactive popup element, such as menu or dialog, triggered by the button.
onClick?_function
Function to call when the button is clicked.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Usage guidelines​

Do

  • Limited interface space: Utilize IconButton when interface space is restricted, prioritizing its use over a larger Button if space is a concern.
  • Triggering modals: Use IconButton to trigger modals for completing related tasks, providing a clear visual indication of the action.
  • Visual separation in text-heavy content: Employ IconButton to create visual separation of actions within text-heavy content, enhancing readability and user comprehension.
  • Lower-emphasis actions: Apply IconButton for actions of lower emphasis that don't obstruct users from completing their primary tasks.

Don’t

  • Non-actionable icons: Avoid using IconButton to display icons without associated actions; in such cases, use a standalone Icon.
  • Multiple IconButton variants: Refrain from using multiple IconButtons with the same icon for different actions on a single surface.
  • Text clarity and icon recognition: If text is more effective in conveying the action or the icon isn't quickly recognizable, consider using text instead of IconButton.

Best practices​

Do

iconButton1

Utilize IconButton for executing low-emphasis actions, like opening a modal dialog to edit a board.

Don’t

iconButton2

Pair IconButton with a standard button to execute a high-emphasis action, positioning IconButton as a secondary action alongside regular buttons.