Icon Button
Square label-less companion to Button. Same variant + size vocabulary so it lines up with Button on the same baseline.
Variants
Sizes
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-icon-buttonProps
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 / Lucide icon. Pass either `icon` OR `children` for custom glyphs. |
| children | React.ReactNode | - | Custom icon content (SVG, bars, etc.) |
| aria-label | 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