Actions · §5.1

Button

Square corners, token colours, 36 / 40 / 48 / 56 px.

Variant
Size
State
Theme
Contrast
Language
Motion
Text size

Code

<Button size="lg" variant="default">Send</Button>

Accessibility

  • Loading keeps the width, sets aria-busy and blocks a second press.
  • 2 px focus ring, 2 px offset.

Usage

Do

  • Labels are verbs.
  • Patient screens use lg or xl.

Don't

  • One primary per view.
  • No icon-only buttons in patient UI.

Platforms

Web
apps/web/components/ui/button.tsx, apps/web/components/ui/spinner.tsx, apps/web/components/ui/styles.ts, apps/web/components/ui/cn.ts
iOS
SwiftUI Button (.borderedProminent)
Android
Compose Button / FilledTonalButton