Logoapsara
DocumentationExamples
IconButtonA button component designed specifically for icons with various sizes and states.
Preview
Installation
Install the component from your command line. 
npm install @raystack/apsara
Import and usage. 
import { IconButton } from '@raystack/apsara/v1'

<IconButton size={2}>
  <InfoCircledIcon />
</IconButton>
Props
The IconButton component accepts the following props:
  • size: Size of the button (1 | 2 | 3 | 4, default: 2)
  • disabled: Whether the button is disabled
  • className: Additional CSS class names
  • onClick: onClick function triggered when iconButton is clicked.
  • All other HTMLButtonElement attributes from React
Size
The IconButton component offers different size options. You can customize the size using the size prop. The available size options are:
loading...
States
The IconButton component has different states: default, hover, and disabled.
loading...
Usage with a letter
The IconButton component can be used with a letter.
loading...
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-text-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