Button
Triggers an action or event, at the level of emphasis the action deserves.
Variants
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Variants
8 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'|'link' | 'default' | One of: default, outline, ghost, destructive, link. |
| 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. |
| asChild | boolean | false | When true, renders the only child element with the button's props/styles. |
| render | React.ReactElement | - | The same as asChild, in the Base UI form some installers rewrite asChild into: the button renders this element with its props and styles, and its children become the element's children. |
| nativeButton | boolean | - | Accepted with `render` and ignored; the element passed decides what renders. |
| icon | React.ComponentType<{ size?: number }> | - | Phosphor icon component rendered before children. |
| children | React.ReactNode | - | Content rendered inside the component. |
| 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' | Native button type; defaults to 'button', so it does not submit an enclosing form unless set to 'submit'. |
| disabled | boolean | - | When true, disables the control. |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | - | Handler called when the element is clicked. |
AI Canvas