Icon Buttons
Usage and anatomy
IconButton is the icon-only counterpart to Button. Use <IconButton.Root /> as the interactive element and <IconButton.Icon /> for its icon. Every icon button should have an accessible aria-label.
import * as IconButton from "@acme/ui/icon-button"import { Search } from "lucide-react"<IconButton.Root aria-label="Search"><IconButton.Icon><Search /></IconButton.Icon></IconButton.Root>
- Use IconButton for compact icon-only actions; use Button when visible text improves clarity.
- Set
loadingto disable interaction and render the spinner automatically. - Use
asChildto apply the styles to a link while preserving link semantics.
Icon Button Variants
License required
In order to get the source code for this component, you need to buy a license.
Icon Button Sizes
License required
In order to get the source code for this component, you need to buy a license.
Icon Button with Icons
License required
In order to get the source code for this component, you need to buy a license.
Icon Button Loading States
License required
In order to get the source code for this component, you need to buy a license.
Icon Button Disabled States
License required
In order to get the source code for this component, you need to buy a license.
Icon Button as Child
License required
In order to get the source code for this component, you need to buy a license.
API reference
IconButton.Root
| Prop | Type | Default |
|---|---|---|
| variant | primary | secondary | tertiary | destructive | ghost | primary |
| size | sm | md | lg | xl | xxl | md |
| loading | boolean | false |
| disabled | boolean | false |
| asChild | boolean | false |
IconButton.Root also accepts native button props. IconButton.Icon inherits the root size and loading state. IconButton requires an accessible name, typically provided with aria-label.