Skip to main content
The IconButton component is specifically designed for icon-only buttons. It provides consistent sizing and styling for icons across the application.

​
Usage

import { IconButton } from '@raystack/apsara';
import { Cross2Icon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <IconButton aria-label="Close">
      <Cross2Icon />
    </IconButton>
  );
}

​
Sizes

import { IconButton } from '@raystack/apsara';
import { PlusIcon } from '@radix-ui/react-icons';

<IconButton size={1} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={2} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={3} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={4} aria-label="Add">
  <PlusIcon />
</IconButton>

​
Disabled state

<IconButton disabled aria-label="Disabled action">
  <PlusIcon />
</IconButton>

​
With click handler

import { IconButton } from '@raystack/apsara';
import { TrashIcon } from '@radix-ui/react-icons';

export default function Example() {
  const handleDelete = () => {
    console.log('Delete clicked');
  };

  return (
    <IconButton onClick={handleDelete} aria-label="Delete item">
      <TrashIcon />
    </IconButton>
  );
}

​
API reference

​
IconButton

Extends all standard HTML button attributes.
​
size
1 | 2 | 3 | 4
default:"2"
The size of the button. Larger numbers create larger buttons.
​
aria-label
string
Accessible label for the button. Required for accessibility since icon buttons don’t have visible text.
​
disabled
boolean
Whether the button is disabled.
​
className
string
Additional CSS class for the button.
​
onClick
(event: MouseEvent) => void
Click handler for the button.
​
children
ReactNode
required
The icon to display inside the button.
​
style
CSSProperties
Inline styles for the button.
​
type
'button' | 'submit' | 'reset'
default:"button"
The HTML button type.