Button

atoms

Primary interactive button — variants: primary (teal CTA), secondary (outlined), ghost (text-only), danger (destructive). Sizes: sm (32px), md (40px), lg (48px).

ARIA Role: button

Demo

Props

Prop	Type	Required	Default
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'danger'`	No	`'primary'`
`size`	`'sm' \| 'md' \| 'lg'`	No	`'md'`
`children`	`React.ReactNode`	Yes	`—`
`onClick`	`() => void`	No	`—`
`disabled`	`boolean`	No	`False`
`loading`	`boolean`	No	`False`
`type`	`'button' \| 'submit' \| 'reset'`	No	`'button'`
`fullWidth`	`boolean`	No	`False`

TypeScript Interface

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  loading?: boolean;
  type?: 'button' | 'submit' | 'reset';
  leadingIcon?: React.ReactNode;
  trailingIcon?: React.ReactNode;
  ariaLabel?: string;
  fullWidth?: boolean;
}

Assertions (NASA Rule 5)

[type]children must be provided and non-empty(NASA Rule 5)
[aria]Loading state must set aria-busy='true' on the element(WCAG 4.1.3)

Usage

Import

import { Button } from '@epasslive/design-system'

Basic

<Button />

With Variants

<Button variant="primary" size="md" />