Button

Use for the main action on a screen. Each view should have only one primary button to clearly communicate the most important next step.

Use for secondary actions that support the primary action — such as cancelling, going back, or choosing an alternative.

Use for tertiary or low-priority actions that should not compete visually with the primary or secondary button.

The default button tone. Use for standard actions in the main SGDS brand colour system.

Use when the button should feel quieter or sit inside a more neutral interface context.

Use for destructive or high-risk actions that need stronger visual warning.

Use on dark or strongly coloured surfaces where the button needs a fixed light treatment for contrast.

Use in tight, compact surfaces such as table rows, toolbars, or dense list items where space is limited.

Use in secondary contexts such as inline actions, cards, or alongside other compact controls.

The default size — use for most primary actions across forms, dialogs, and general page content.

Use for prominent calls to action, such as hero sections or landing pages, where the button needs extra visual weight.

Omit the leading icon when the label alone is clear and no visual reinforcement is needed.

Use a leading icon when the icon adds clarity to the action — for example, a download icon before a download label.

Omit the trailing icon when the action does not imply movement, navigation, or a follow-up interaction.

Use a trailing icon to indicate navigation, forward movement, or that a menu or panel will open.