Icon Button
Triggers an action with an icon alone, for controls whose glyph reads as the label.
Variants
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Variants
4 examplesStates
6 examplesAdd to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default'|'outline'|'ghost'|'destructive' | 'outline' | One of: default, outline, ghost, destructive. |
| size | 'sm'|'md'|'lg' | 'md' | One of: sm, md, lg. |
| icon | React.ComponentType<{ size?: number, weight?: string }> | - | Phosphor icon. Pass either `icon` OR `children` for custom glyphs. |
| children | React.ReactNode | - | Custom icon content (SVG, bars, etc.) |
| aria-labelreq | string | - | REQUIRED for accessibility (no visible text). |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
| type | 'button'|'submit'|'reset' | 'button' | HTML button type; defaults to 'button' so the control does not submit an enclosing form. |
| disabled | boolean | - | When true, disables the control. |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | - | Handler called when the element is clicked. |
AI Canvas