IconButton

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

Usage

import { IconButton } from "@raystack/apsara/v1";
 
<IconButton size={2}>
  <InfoCircledIcon />
</IconButton>;

IconButton Props

Prop	Type	Default
`size`	`1 \| 2 \| 3 \| 4`	`2`
`disabled`	`boolean`	`false`
`className`	`string`	-
`onClick`	`(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void`	-

Examples

Size

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

<Flex gap="large" align="center">
  <IconButton size={1}>
    <Info size={16} />
  </IconButton>
  <IconButton size={2}>
    <Info size={16} />
  </IconButton>
  <IconButton size={3}>
    <Info size={16} />
  </IconButton>
  <IconButton size={4}>
    <Info size={16} />
  </IconButton>
</Flex>

State

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

<Flex gap="large">
  <IconButton size={4}>
    <Info size={16} />
  </IconButton>
  <IconButton size={4} disabled>
    <Info size={16} />
  </IconButton>
</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