IconButton

A version of Button that uses an icon alone for its label.

Design guidance

When and how to use this

Use a IconButton to allow a user to perform an action related to the content currently displayed. IconButton is particularly well suited for compact parts of the interface such as toolbars and as a trigger for Menu or Popover.

When to consider something else

If the action associated with an interaction is a navigation, consider using a Link instead.

React

IconButton composes the Button component and supports the same colors, sizes and variants.

A light color is also available for use on dark backgrounds.

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
  <IconButton color="primary" icon={iconInfo} label="Info" />
  <IconButton color="warning" icon={iconAlert} label="Warning" />
  <IconButton color="danger" icon={iconAlert} label="Danger" />
  <IconButton color="success" icon={iconCheckmark} label="Success" />
  <Stack bg="neutral.700" p="200" borderRadius="300">
    <IconButton color="light" icon={iconInfo} label="Light" />
  </Stack>
</Stack>

Color Scheme

Button supports color modes, but sometimes a design calls for the colorScheme to override the mode. Pass light or dark to set the color explicitly.

live

<DesignSystemProvider attach fontsHost="/typography/">
  <Stack
    direction="row"
    spacing="300"
    alignItems="center"
    p="400"
    bg="neutral.800"
    m="-400"
  >
    <IconButton
      colorScheme="light"
      variant="primary"
      label="Primary"
      icon={iconBadge}
    />
    <IconButton
      colorScheme="light"
      variant="secondary"
      label="Secondary"
      icon={iconBadge}
    />
    <IconButton
      colorScheme="light"
      variant="glass"
      label="Glass"
      icon={iconBadge}
    />
    <IconButton
      colorScheme="light"
      variant="ghost"
      label="Ghost"
      icon={iconBadge}
    />
  </Stack>
</DesignSystemProvider>

Size

Size is controlled via the size prop and defaults to medium.

live

<Stack alignItems="center" direction="row" spacing="300">
  <IconButton size="small" label="Small" icon={iconBadge} />
  <IconButton size="medium" label="Medium" icon={iconBadge} />
  <IconButton size="large" label="Large" icon={iconBadge} />
</Stack>

Disabled

Set the isDisabled prop to disable the button.

live

<Stack direction="row" spacing="300">
  <IconButton isDisabled label="Disabled" variant="primary" icon={iconBadge} />
  <IconButton
    isDisabled
    label="Disabled"
    variant="secondary"
    icon={iconBadge}
  />
  <IconButton isDisabled label="Disabled" variant="glass" icon={iconBadge} />
  <IconButton isDisabled label="Disabled" variant="ghost" icon={iconBadge} />
</Stack>

Loading

Set the isLoading prop to convey that an action is processing.

live

<Stack direction="row" spacing="300">
  <IconButton isLoading label="Loading" variant="primary" icon={iconBadge} />
  <IconButton isLoading label="Loading" variant="secondary" icon={iconBadge} />
  <IconButton isLoading label="Loading" variant="glass" icon={iconBadge} />
  <IconButton isLoading label="Loading" variant="ghost" icon={iconBadge} />
</Stack>

React Native

The React Native IconButton mirrors the variant, size, and state props documented above (including isDisabled, isLoading, and iconBefore / iconAfter analogues) and ships from @hoverinc/design-system-react-native.

Selected

Set the isSelected prop to render the IconButton in a selected (pressed-on) state. This is the right prop for icon-only toggles such as filter chips or segmented controls. Selected styling (typically a ring or fill matching the active variant) is driven by the variant. aria-pressed is set automatically when isSelected is provided so assistive technologies announce the toggle state. The label prop remains required for accessibility.

<IconButton isSelected variant="primary" label="Filter" icon="filter" />

Bootstrap

Add the .btn-icon class to a Button and an icon as the button's content following the Bootstrap Icon markup.

live

<div class="hstack gap-200">
  <button type="button" class="btn btn-primary btn-icon" aria-label="Primary">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
  <button type="button" class="btn btn-warning btn-icon" aria-label="Warning">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
  <button type="button" class="btn btn-danger btn-icon" aria-label="Danger">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
  <button type="button" class="btn btn-success btn-icon" aria-label="Success">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
</div>

Size

Size is applied via the .btn-icon-[size] class in addition to other .btn classes and defaults to medium.

live

<div class="hstack gap-300">
  <button type="button" class="btn btn-primary btn-icon-sm" aria-label="Small">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Medium">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
  <button type="button" class="btn btn-primary btn-icon-lg" aria-label="Large">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-feather" />
    </svg>
  </button>
</div>

Icon

Link