Button
5 variants × 3 sizes with full hover, focus, active, and disabled coverage. shadcn/ui-aligned API: variant, size, asChild.
Variants
Sizes
With icon
Disabled
Add 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/andromeda-button-systemProps
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 / Lucide 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