IconButton

A button component designed specifically for icons with various sizes and states.

Usage

1import { IconButton } from "@raystack/apsara";

IconButton Props

Prop

Type

Examples

Size

The IconButton component offers different size options. You can customize the size using the size prop. The available size options are:

1<Flex gap="large" align="center">
2  <IconButton size={1}>
3    <Info size={16} />
4  </IconButton>
5  <IconButton size={2}>
6    <Info size={16} />
7  </IconButton>
8  <IconButton size={3}>
9    <Info size={16} />
10  </IconButton>
11  <IconButton size={4}>
12    <Info size={16} />
13  </IconButton>
14</Flex>

State

The IconButton component has different states: default, hover, and disabled.

1<Flex gap="large">
2  <IconButton size={4}>
3    <Info size={16} />
4  </IconButton>
5  <IconButton size={4} disabled>
6    <Info size={16} />
7  </IconButton>
8</Flex>

Styling

The IconButton uses CSS variables for consistent styling across themes:

  • Background color uses --rs-color-background-base-primary
  • Border color uses --rs-color-border-base-primary
  • Text color uses --rs-color-foreground-base-primary
  • Hover state uses --rs-color-background-base-primary-hover
  • Disabled state uses reduced opacity and different background/border colors

Accessibility

The IconButton component inherits all the accessibility features of the native HTML button element:

  • Keyboard navigation support
  • Proper disabled state handling
  • Can be focused and activated using keyboard
  • Supports all standard button ARIA attributes

For better accessibility, make sure to:

  • Provide meaningful aria-label when the button's purpose isn't clear from the icon alone
  • Consider adding tooltips for icon-only buttons