Actions · §5.2

Icon button

A labelled 20 px icon in a 40 or 44 px target.

Size
Variant
Theme
Contrast
Language
Motion
Text size

Code

<IconButton label="Print visit card" name="print" />

Accessibility

  • Always has an accessible name and a matching tooltip.

Usage

Do

  • 40 px for staff, 44 px for patients.

Don't

  • Never the only way to an action in patient UI.

Platforms

Web
apps/web/components/edflow/icon-button.tsx, apps/web/components/ui/tooltip.tsx
iOS
SwiftUI Button with Image(systemName:)
Android
Compose IconButton