NSW Email Design System

Buttons

Buttons are interactive elements that guide people to take action. They link clearly to external pages or trigger specific interactions, and they work across devices and email platforms.

Buttons are a basic building block of email design. They're:

clear and easy to recognise
accessible and visually distinct
flexible and reusable
available in solid or outline styles with multiple colour options
easy to align to suit your layout.

Well-designed buttons improve accessibility. They help people recognise the next step and make it easier to act, no matter what device or platform they're using.

When to use

Use buttons when you need to:

draw attention to a single, primary action
provide a clear pathway to a related service or webpage
support task completion in transactional or promotional emails

When not to use

Avoid using buttons for:

long, descriptive links – use text links instead
decorative purposes without a clear action
multiple, competing actions in the same content block

How to use buttons effectively

Keep button labels short and action-oriented (for example, Get started, Read more).
Position buttons prominently, usually near the top or end of a section.
Limit to 2 buttons per section to reduce cognitive load.
Use colour purposefully:
- Primary: main action
- Secondary or grey: alternative or supporting actions

Button variations

Buttons are available in solid and outline styles, with left, centre and right alignment options to suit different layouts and content types.

Solid primary button

The default and most important action style, using the NSW primary brand colour.
Best for critical actions such as form submission, registration, or confirmation.
Always ensure only one primary button per section to avoid confusion.

Solid secondary button

A light, low-contrast button style designed specifically for dark backgrounds.
It should not be used on white or light surfaces, as accessibility and visibility will be compromised.
Use this option when the layout already provides a strong background (e.g. coloured banner, feature block) and the button needs to remain legible without dominating the design.

Solid grey button

A neutral button style for non-critical actions.
Useful when a secondary action needs visibility but should not compete with the primary call to action.
Works well in settings like service confirmations or system notifications where subdued emphasis is required.

Solid tertiary button

A vibrant, high-contrast blue style that provides strong visual emphasis.
While the primary button is the default choice, the tertiary can replace it when a brighter or more energetic tone is appropriate.
Effective for campaigns, promotional emails, or contexts where standout visibility is desired.

Solid accent button

Uses the NSW accent palette to draw attention.
Effective for urgent, time-sensitive, or promotional actions where contrast is essential.
Should be used sparingly so it doesn't compete with primary actions.

Outline primary button

A hollow button style outlined with the NSW primary colour.
Provides a lighter-weight alternative to solid buttons when subtlety is required.
Often used in combination with a solid primary button to offer a secondary choice.

Outline grey button

A minimal, neutral outline style.
Best for secondary or supporting actions where visual weight should remain low.
Particularly effective in text-heavy sections where the button should not dominate.

Outline secondary button

An outlined version of the secondary button, designed for use on dark backgrounds.
Provides a subtle call to action while maintaining accessibility and contrast.
Use when supporting a primary action in a darker section of the layout.

Outline tertiary button

An outlined version of the vibrant tertiary style.
Adds visual interest without the full weight of a solid fill.
Best used in promotional layouts or paired with a solid primary for balanced emphasis.

Outline accent button

Uses the NSW accent palette in outline form.
Suitable for optional or promotional links where emphasis is needed but a solid button would feel too heavy.
Can be paired with a solid primary button to provide a clear secondary choice.

Left-aligned button

Aligns the button to the left margin of the content block.
Use when the surrounding text or layout is left-aligned, ensuring visual consistency.
Often used in transactional or service emails where buttons need to align with content flow.

Centre-aligned button

Centres the button horizontally within its block.
Most common alignment for CTAs where the button is the main focus of a section.
Works well in simple announcements or single-purpose campaigns where balance and clarity matter.

Right-aligned button

Aligns the button to the right margin of its block.
Effective in layouts that follow left-to-right reading flow, signalling progression.
Often used for navigation-style actions such as "Next", "Continue" or "View more".

Prop	Type	Default	Description
`variant`	`string`	`solid`	Determines whether the button is filled (solid) or outlined. Solid is the default and most common style.
`bgcolor`	`string`	`props.page.primary[800]`	The background colour for the button. For solid buttons, this sets both the fill and border colour. For outline buttons, this sets the border colour.
`color`	`string`	`props.page.white (solid) or bgcolor (outline)`	The text colour of the button. Defaults to white for solid buttons, or matches the border colour for outline buttons.
`align`	`string`	`left`	Sets horizontal alignment of the button within its container. Commonly used for layout consistency with surrounding content.
`href`	`string`	`props.page.url`	The URL the button links to. Always provide a valid href to ensure the button is accessible and functional.
`mobileClass`	`string`	`mobile-center`	CSS utility class applied on mobile. Defaults to centring the button, but can be changed to support other mobile layouts.
`msoPt`	`string`	`16px`	Padding-top adjustment for Outlook-specific rendering, ensuring text appears vertically centred.
`msoPb`	`string`	`27px`	Padding-bottom adjustment for Outlook-specific rendering. Balances the vertical spacing in legacy clients.

Buttons

Buttons are interactive elements that guide people to take action. They link clearly to external pages or trigger specific interactions, and they work across devices and email platforms.

Buttons are a basic building block of email design. They're:

clear and easy to recognise
accessible and visually distinct
flexible and reusable
available in solid or outline styles with multiple colour options
easy to align to suit your layout.

Well-designed buttons improve accessibility. They help people recognise the next step and make it easier to act, no matter what device or platform they're using.

When to use

Use buttons when you need to:

draw attention to a single, primary action
provide a clear pathway to a related service or webpage
support task completion in transactional or promotional emails

When not to use

Avoid using buttons for:

long, descriptive links – use text links instead
decorative purposes without a clear action
multiple, competing actions in the same content block

How to use buttons effectively

Keep button labels short and action-oriented (for example, Get started, Read more).
Position buttons prominently, usually near the top or end of a section.
Limit to 2 buttons per section to reduce cognitive load.
Use colour purposefully:
- Primary: main action
- Secondary or grey: alternative or supporting actions

Button variations

Buttons are available in solid and outline styles, with left, centre and right alignment options to suit different layouts and content types.

Solid primary button

The default and most important action style, using the NSW primary brand colour.
Best for critical actions such as form submission, registration, or confirmation.
Always ensure only one primary button per section to avoid confusion.

Solid secondary button

A light, low-contrast button style designed specifically for dark backgrounds.
It should not be used on white or light surfaces, as accessibility and visibility will be compromised.
Use this option when the layout already provides a strong background (e.g. coloured banner, feature block) and the button needs to remain legible without dominating the design.

Solid grey button

A neutral button style for non-critical actions.
Useful when a secondary action needs visibility but should not compete with the primary call to action.
Works well in settings like service confirmations or system notifications where subdued emphasis is required.

Solid tertiary button

A vibrant, high-contrast blue style that provides strong visual emphasis.
While the primary button is the default choice, the tertiary can replace it when a brighter or more energetic tone is appropriate.
Effective for campaigns, promotional emails, or contexts where standout visibility is desired.

Solid accent button

Uses the NSW accent palette to draw attention.
Effective for urgent, time-sensitive, or promotional actions where contrast is essential.
Should be used sparingly so it doesn't compete with primary actions.

Outline primary button

A hollow button style outlined with the NSW primary colour.
Provides a lighter-weight alternative to solid buttons when subtlety is required.
Often used in combination with a solid primary button to offer a secondary choice.

Outline grey button

A minimal, neutral outline style.
Best for secondary or supporting actions where visual weight should remain low.
Particularly effective in text-heavy sections where the button should not dominate.

Outline secondary button

An outlined version of the secondary button, designed for use on dark backgrounds.
Provides a subtle call to action while maintaining accessibility and contrast.
Use when supporting a primary action in a darker section of the layout.

Outline tertiary button

An outlined version of the vibrant tertiary style.
Adds visual interest without the full weight of a solid fill.
Best used in promotional layouts or paired with a solid primary for balanced emphasis.

Outline accent button

Uses the NSW accent palette in outline form.
Suitable for optional or promotional links where emphasis is needed but a solid button would feel too heavy.
Can be paired with a solid primary button to provide a clear secondary choice.

Left-aligned button

Aligns the button to the left margin of the content block.
Use when the surrounding text or layout is left-aligned, ensuring visual consistency.
Often used in transactional or service emails where buttons need to align with content flow.

Centre-aligned button

Centres the button horizontally within its block.
Most common alignment for CTAs where the button is the main focus of a section.
Works well in simple announcements or single-purpose campaigns where balance and clarity matter.

Right-aligned button

Aligns the button to the right margin of its block.
Effective in layouts that follow left-to-right reading flow, signalling progression.
Often used for navigation-style actions such as "Next", "Continue" or "View more".

Prop	Type	Default	Description
`variant`	`string`	`solid`	Determines whether the button is filled (solid) or outlined. Solid is the default and most common style.
`bgcolor`	`string`	`props.page.primary[800]`	The background colour for the button. For solid buttons, this sets both the fill and border colour. For outline buttons, this sets the border colour.
`color`	`string`	`props.page.white (solid) or bgcolor (outline)`	The text colour of the button. Defaults to white for solid buttons, or matches the border colour for outline buttons.
`align`	`string`	`left`	Sets horizontal alignment of the button within its container. Commonly used for layout consistency with surrounding content.
`href`	`string`	`props.page.url`	The URL the button links to. Always provide a valid href to ensure the button is accessible and functional.
`mobileClass`	`string`	`mobile-center`	CSS utility class applied on mobile. Defaults to centring the button, but can be changed to support other mobile layouts.
`msoPt`	`string`	`16px`	Padding-top adjustment for Outlook-specific rendering, ensuring text appears vertically centred.
`msoPb`	`string`	`27px`	Padding-bottom adjustment for Outlook-specific rendering. Balances the vertical spacing in legacy clients.

Command Palette

Command Palette

Buttons

When to use

When not to use

How to use buttons effectively

Button variations

Solid primary button

Solid secondary button

Solid grey button

Solid tertiary button

Solid accent button

Outline primary button

Outline grey button

Outline secondary button

Outline tertiary button

Outline accent button

Left-aligned button

Centre-aligned button

Right-aligned button

Buttons

When to use

When not to use

How to use buttons effectively

Button variations

Solid primary button

Solid secondary button

Solid grey button

Solid tertiary button

Solid accent button

Outline primary button

Outline grey button

Outline secondary button

Outline tertiary button

Outline accent button

Left-aligned button

Centre-aligned button

Right-aligned button