Button

Buttons trigger an action such as submitting a form, navigating through multi-step flows, or canceling the form

Variants
Primary
Secondary
States
Default Button is ready to be clicked for user interaction.
Hover Hover state indicates when cursor is over the button.
Active Active state indicates when the button is clicked or tapped.
Focus Focus state indicates when button is highlighted via keyboard navigation (Tab key).
Disabled Disabled state indicates that the button is inactive and cannot be clicked.
Loading Loading state indicates that an action is being processed. A spinner is visible and the button is temporarily non-interactive to prevent multiple submissions.
Behaviour
Submitting a form
  • Clicking the submit button triggers the form validation.
  • If validation fails, contextual error messages appear and the submission is halted.
  • Any missing or incorrect fields will be highlighted with a message.
  • Once all fields are valid, the form will be submitted.
Navigating through multi-step flows
  • Clicking the next button allows user to progress to the next step
  • Clicking the previous button allows user to return to the previous step
  • At the last step, the submit button will be visible.
Canceling a form
  • Clicking the cancel button will remove any data entered into the fields.
Specs
1
Icon
  • 14x14, spinner
  • Positioned on the right side
  • Visible during loading state to indicate the action is being processed.
2
Label
  • Recommended max 20 char
2 1
Dos and Don'ts
  1. Do not use ALL CAPS for the button labels as it may feel too abrupt.
  2. Choose words that support the action itself, such as "Submit" or "Cancel".
  3. Do not use the secondary color for "Submit" action button as it might be overlooked.