ComponentsButton
Components
Button
Sharp corners (0px radius), Raleway semibold, 42px default height. The live site's dominant button language is square — rounded pills only show up on minority patterns like size-selector chips.
Configurator
Icons
A button takes an icon on one side only — iconLeft and iconRight are mutually exclusive at the type level.
Usage
<Button
variant="primary"
size="md"
>
Add to Bag
</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "outline" | "ghost" | "accent" | "primary" | Visual style of the button. |
| size | "sm" | "md" | "lg" | "icon" | "md" | Height and padding scale. |
| iconLeft | ReactNode | — | Icon before the label, sized to 16px automatically. Mutually exclusive with iconRight. |
| iconRight | ReactNode | — | Icon after the label, sized to 16px automatically. Mutually exclusive with iconLeft. |
| disabled | boolean | false | Disables interaction and dims the button. |
| className | string | — | Additional classes, merged via tailwind-merge. |
| ...props | ButtonHTMLAttributes | — | Any native <button> attribute (onClick, type, etc.). |
Do's and Don'ts
Do
- ·Use primary for the single main action in a section (Add to Bag, Checkout).
- ·Use outline for secondary actions that sit next to a primary button.
- ·Keep labels short and action-oriented ("Add to Bag", not "Click here to add this to your bag").
Don't
- ·Don't use more than one primary button in the same view — it dilutes the hierarchy.
- ·Don't apply rounded/pill corners here — sharp corners are the site's dominant button language.
- ·Don't use ghost for destructive actions; pair those with clear copy instead of relying on color alone.