Harmonica Design System
Components

Button

Token-driven button in three variants and three sizes.

Variants

contained (default), outlined, and text. Each derives its color from --cdz-color-primary, so it re-themes automatically.

Sizes

sm (32px), md (40px, default), lg (48px).

Usage

import { Button } from '@cdz/ui';

<Button>Save</Button>
<Button variant="outlined" size="sm">Cancel</Button>
<Button variant="text">Learn more</Button>
<Button fullWidth>Continue</Button>
<Button disabled>Unavailable</Button>

Props

PropTypeDefaultNotes
variantcontained | outlined | textcontainedVisual style
sizesm | md | lgmdControl height
fullWidthbooleanfalseStretch to container

All other native <button> attributes (onClick, type, disabled, …) pass through, and the component forwards its ref.