Skip to main content

Actions and status

IconButton

Render a compact icon-only action. Perfect for when you want a button, but you're too lazy to write words.

Curated demo

Reference

Render a compact icon-only action. Perfect for when you want a button, but you're too lazy to write words.

  • Always pass ariaLabel for accessible naming. A button with no text is completely invisible to screen readers without an ariaLabel.
  • Reserve icon-only controls for compact secondary actions.
  • Use selected for toggle-style icon controls so the pressed state is announced.

Props

Name Type Default Description
ariaLabel * string — Accessible label for the button.
variant 'primary' | 'secondary' | 'danger' 'primary' The visual style of the button.
size 'sm' | 'md' | 'lg' 'md' The size of the button.
disabled boolean false Whether the button is disabled.
selected boolean false Whether the button is in a selected/pressed state.
class string — Additional CSS classes.

Example snippet

<IconButton ariaLabel="Open menu" selected><span aria-hidden="true">☰</span></IconButton>