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 PlayroomAPI Reference

Quick Start

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

Variants​

The Button is available in 10 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"
/>

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

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

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

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

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

{/* 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

Responsive Guidelines​

Icon buttons require larger tap targets on smaller viewports, where touch input is less precise than a pointer. Their compact footprint makes adequate sizing especially important. Adjust the size prop on tablet and mobile relative to its desktop value, following the default mapping below:

DesktopTabletMobile
smallstandardstandard
standardlargelarge or xLarge
largelargelarge or xLarge

Read the current breakpoint with useResponsiveLayout and set the size prop accordingly:

Resize the browser window to see the size adapt across breakpoints.

const { isDesktop } = useResponsiveLayout();
const size = isDesktop ? 'standard' : 'large';

return (
  <IconButton
    aria-label="Add"
    icon={AddIcon}
    size={size}
    variant="accentPrimary"
  />
);
View in Playroom

API Reference​

IconButton

PropDefaultDescription
variant?'accentPrimary''accentPrimary' | 'accentSecondary' | 'criticalPrimary' | 'criticalSecondary' | '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.

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.