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
6 examplesStates
8 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. |
| pressed | boolean | - | Makes it a toggle button that stays on or off, and sets aria-pressed. On outline and ghost, true paints the held look (surface.active fill, primary ink, border.bright edge on hover); default and destructive keep their fill. Leave unset for a plain action. |
| 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