core
Button
Variants
Sizes
Disabled
Import
import { Button } from '@connor-adams/designsystem'Usage
One-line: Cashflow's action button — solid oxblood primary for the main CTA, neutral variants for the rest, tinted destructive for deletes.
<Button variant="primary">Add transaction</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="destructive" size="sm">Delete</Button>
Variants: default/primary (oxblood fill) · secondary (card + border) · outline · ghost · destructive/danger (tinted red, red text + border) · link (underline on hover).
Sizes: sm (36px) · default (40px) · lg (44px) · icon (40×40 square).
Rules: reach for primary once per view — oxblood is the brand and is used sparingly. Everything secondary is greyscale.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ButtonVariant | undefined | default | Visual treatment. Default solid oxblood. |
| size | ButtonSize | undefined | default | Control height. `icon` is a 40×40 square. |