Button

Buttons trigger actions such as submitting forms, starting processes or confirming decisions. They are visually distinct and reserved for the most important actions on a page.

Use buttons for actions that change something or move users forward in a process, and use links for navigation.

Use buttons when users need to:

• submit forms or applications
• start or continue multi-step processes
• confirm important decisions
• trigger immediate actions
• save progress or changes

Limit yourself to one primary button per page section to improve its effectiveness.

Avoid the button component when:

• the action is navigation to another page, use a link instead
• you’re offering multiple equally important options
• the action is minor or infrequently used, style it as a text link
• you need to show a list of related actions, use text links in a summary list

Write button text that clearly describes the action and outcome:

• start with a verb (Download, Submit, Cancel, Save)
• be specific about what happens next (if it’s not clear from context)
• keep text under 5 words where possible
• avoid generic terms like ‘Click here’, ‘OK’, ‘Yes’, ‘No’)

For destructive actions, make the consequences clear: ‘Delete draft’, ‘Withdraw application’.

Primary buttons are dark teal with white text. Use it for the main action users need to take.

Secondary buttons are light teal with black text. Use it for important, but not primary actions. Use secondary buttons for on-page actions, like opening a modal.

Going back a stage in a form or process should use the secondary button.

Destructive buttons are red with white text. Use it only for actions that cannot be undone, like deleting an account or withdrawing an application. Always include a confirmation step before destructive actions.