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
6 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'|'link' | 'default' | One of: default, outline, ghost, destructive, link. |
| size | 'sm'|'md'|'lg' | 'md' | One of: sm, md, lg. |
| asChild | boolean | false | When true, renders the only child element with the button's props/styles. |
| 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