Button

The commitment control. Everything a clinician does that changes the record, the workflow or the patient's pathway goes through one of these — so its hierarchy, its size and its wording are all safety decisions.

Overview

Buttons in consumer software optimise for conversion. In clinical software they optimise for the opposite: making sure the clinician who pressed it meant to. The system therefore constrains two things harder than a general-purpose library would — how many primary actions may exist (one) and how small a target may be (never below the touch floor).

Variants

Five variants, mapped onto shadcn's standard names so ecosystem examples drop in unchanged.

destructive is not an alarm

destructive is red because it destroys data. It shares a hue with --alarm-critical and shares nothing else. A destructive button is a control the clinician operates; an alarm is a signal about the patient. Never style an alarm as a button, and never place a destructive button inside an alarm banner.

Sizes and touch targets

The pixel height of a button is meaningless on its own — what matters is the physical size it ends up on the target display. The system specifies both.

States

• Focus is never removed. The ring is a governed token. A clinician on keyboard or a switch device must always be able to see where they are.
• Pending is a real state, not a spinner overlay. Any action that reaches a server holds the button in aria-busy and blocks re-submission. Double-activating "Notify cath lab" must be impossible, not merely discouraged.
• Prefer explaining over disabling. A disabled button with no reason is a dead end. Where a precondition is unmet, keep the button enabled and explain on activation, or pair the disabled state with adjacent text saying what is missing.

Writing the label

• Verb plus object. "Activate pathway", "Notify cath lab", "Discard draft report". Never "OK", "Submit", "Yes".
• Match the heading. If a dialog asks "Discard this draft report?", the button says "Discard draft report" — not "Confirm".
• Sentence case, no full stop. Two to four words. Budget 35 % expansion for translation.
• Name the irreversible thing. A destructive label states what is lost, so the consequence survives being read at a glance.

Grouping and order

• Primary last, on the right in dialogs and forms; primary first on the left in toolbars and page headers. Be consistent within a product and document which you chose.
• Never two primaries. If a screen genuinely has two equal actions, both become outline and the screen needs a clearer purpose.
• Separate destructive actions physically — a gap, a divider, or the opposite side of the dialog — so a mis-tap on the adjacent control is not catastrophic.
• Never place a destructive button as the default focus target.

Do's and don'ts

Accessibility

• Use a real <button> for actions and <a> for navigation. A div with a click handler is unreachable by keyboard and invisible to assistive technology.
• Focus ring always visible at ≥ 3:1 against both the button and the surface behind it. Never outline: none.
• Icon-only buttons require an accessible name via aria-label, plus a tooltip for sighted users. An icon alone is never a label.
• Pending state announces. aria-busy="true" and a live-region update, so a screen-reader user knows the action was received.
• Do not rely on colour alone to mark a destructive action — the label carries the meaning.
• Target spacing. At least 8 px between adjacent touch targets so the gap itself is not tappable.

Outcomes of use

What this contributes to, in the terms of Usability & context of use. These are attributes believed to contribute to an outcome; the outcome itself is settled by observing real use in a specified context, not by this page.

• Effectiveness — The action taken is the action intended — one primary per view, labels that name outcomes, destructive controls physically separated.
• Efficiency — Physical effort to acquire the target. A mis-tap costs a full recovery cycle, which is why the touch floor is stated in millimetres rather than pixels.
• Satisfaction — Confidence that pressing will do what the label says, particularly immediately before an irreversible step.

Clinical safety notes

• One primary per view. Mitigates: the wrong action taken under time pressure because two looked equally weighted.
• 10 mm physical touch floor. Mitigates: mis-tap on a cart or gantry display, particularly with gloves or in motion.
• Pending blocks re-submission. Mitigates: duplicate irreversible actions — two cath-lab activations, two orders.
• Destructive actions physically separated and never default-focused. Mitigates: accidental data loss from keyboard-confirm or adjacent mis-tap.
• Labels name outcomes. Mitigates: confirmation-dialog blindness, where "Yes/No" is answered without reading.
• No coral in product. Mitigates: a brand-coloured control being read as a high-priority alarm, and dilution of alarm salience.

Implementation

The stock shadcn Button with two changes: an enlarged lg size that is the default on touch platforms, and a development-time warning when more than one primary renders in a tree.

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm " +
  "text-sm font-semibold transition-colors focus-visible:outline-none " +
  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
  "disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        // NB: no coral. --primary is teal by design — see Colour.
        default:     "bg-primary text-primary-foreground hover:brightness-110",
        outline:     "border border-border bg-transparent hover:bg-muted",
        ghost:       "hover:bg-muted",
        destructive: "bg-destructive text-destructive-foreground hover:brightness-110",
        link:        "underline-offset-4 hover:underline text-primary",
      },
      size: {
        sm:      "h-8 px-3",    // pointer input only
        default: "h-9 px-4",    // pointer input only
        lg:      "h-11 px-5",   // touch floor — default on touch platforms
        icon:    "h-11 w-11",   // always touch-sized; requires aria-label
      },
    },
    defaultVariants: { variant: "default", size: "lg" },
  }
)

// Pending state — blocks re-submission of irreversible actions.
<Button
  variant="default"
  size="lg"
  disabled={isPending}
  aria-busy={isPending}
  onClick={notifyCathLab}
>
  {isPending ? "Notifying…" : "Notify cath lab"}
</Button>

Props

Related

• Alert Banner — buttons inside an alarm use sm.
• Colour — why primary is teal and not coral.
• Typography — label sizing and expansion budget.
• Dialog — destructive confirmation patterns.