RAPIDA UI

Button

Buttons trigger actions. In crisis reporting, every button press may mean the difference between a report reaching coordinators or being lost.

Preview — Primary Submit

Preview — Safe Exit

Variants

Variant Usage
primarySubmit report, confirm action, main CTA
secondarySecondary actions like "Save draft", "Add another"
ghostTertiary actions, cancel, back navigation
dangerDestructive actions like "Delete report"
safe-exitAlways-visible escape from a form or flow
icon-onlyMap controls, toolbar actions, close dialogs

Sizes

Size Height Usage
sm40pxInline actions, table rows
md48pxDefault — forms, dialogs
lg56pxPrimary CTA, mobile full-width

States

Accessibility

  • All buttons receive visible focus rings via focus:ring-2.
  • Loading state sets aria-live="polite" and disables the button.
  • Link buttons (href) use aria-disabled instead of the HTML disabled attribute.
  • Icon-only buttons must include an aria-label describing the action.

Trauma-Informed Design

  • The safe-exit button uses neutral slate-600, not alarming red — it should feel calm and easy to press.
  • Loading state prevents accidental double-submission of crisis reports.
  • Buttons are 48px minimum height for stressed users with trembling hands.
  • Labels use clear, action-oriented language: "Submit Report" not "Submit".