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 8 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"
/>
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".

{/* 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"
/>
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"
/>
View in Playroom

API Reference​

IconButton

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.