01Shipped
Button
The primary action affordance. ONE primary per surface, N secondaries.
Import
import { Button, buttonVariants } from "@charply/design"Variants
Default
With icon
Outline
Secondary
Ghost
Destructive
Sizes
Icon
Icon-only buttons require aria-label
As link
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "default" | Visual style |
| size | "default" | "sm" | "lg" | "xs" | "icon" | "icon-sm" | "icon-xs" | "default" | Height and padding |
| asChild | boolean | false | Compose with <a>, Radix trigger, etc. |
| disabled | boolean | false | Disabled with 50% opacity |
Guidelines
docs/design/components/button.mdDo
- ✓Use exactly one `default` / `primary` Button per card or panel.
- ✓Add icons as children — the Button auto-sizes `svg` to `size-4`.
- ✓Use `asChild` when the button is semantically a link.
Don't
- ✗Stack two primary buttons side by side. Use one primary + one secondary.
- ✗Use `variant="ghost"` for primary page actions — it will be missed.
- ✗Add custom padding overrides. Use a `size` variant instead.
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.