IconButton

Anatomy

Import and assemble the component:

1import { IconButton } from "@raystack/apsara";
2
3<IconButton />

Usage

An icon-only button. Two props: how big it is, and whether it can be pressed.

Size

Four steps, 1 through 4. Match the step to the control the button sits beside so their heights agree.

1<Flex gap={9} 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

Hover and focus are handled for you. disabled is the only state you set, and it removes the button from the tab order.

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

API Reference

Renders a button designed for icon-only content.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

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