Variants
6 variants — hover & press each one
Sizes
sm · md (default) · lg
States
Default · Disabled · Block
Icon slots
iconLeft · iconRight · both
Do / Don't
✓ Do
✕ Don't
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary"|"accent"|"pink"|"secondary"|"dark"|"ghost" | "primary" | Visual treatment. primary = violet, accent = lime, ghost = dashed transparent. |
| size | "sm"|"md"|"lg" | "md" | Affects padding, font-size, and shadow offset. |
| block | boolean | false | Full-width block button. Sets display: flex and width: 100%. |
| disabled | boolean | false | Mutes to 45% opacity, disables all pointer events and motion. |
| iconLeft | ReactNode | null | Element rendered before label — use a 16px SVG icon. |
| iconRight | ReactNode | null | Element rendered after label — use a 10px chevron SVG. |
| children | ReactNode | — | Button label text. |
| style | CSSProperties | {} | Merged onto the root element. Use sparingly — prefer variant/size. |
| ...rest | ButtonHTMLAttributes | — | Passed to the native <button> (onClick, type, aria-*, etc.). |
Usage
import { Button } from "components/core/Button";
// Primary — main action
<Button variant="primary">Save campaign</Button>
// With icon + size
<Button variant="accent" size="lg"
iconRight={<ChevronRight />}>
Get started
</Button>
// Disabled
<Button variant="primary" disabled>Submit</Button>
// Full width
<Button variant="accent" block>Create account</Button>