Buttons

Buttons provide users with the ability to submit an action or follow a link to another location. 

Primary

The primary button is NSW Primary Blue and is used for the main call to action on a page.

//Link styled as button
<a href="#" class="nsw-button nsw-button--primary">Link</a>


//Action buttons
<button type="button" class="nsw-button nsw-button--primary">Button</button>

<button type="submit" class="nsw-button nsw-button--primary">Submit Button</button>

<button type="reset" class="nsw-button nsw-button--primary">Reset Button</button>


//Input buttons
<input type="button" class="nsw-button nsw-button--primary" value="Input Button">

<input type="submit" class="nsw-button nsw-button--primary" value="Input Submit Button">

<input type="reset" class="nsw-button nsw-button--primary" value="Input Reset Button">

 

Copy

Highlight

By default this is NSW Primary Highlight, but it may be customised to your brand colour (where brand approved). You may choose to use this as your primary button.

//Link styled as button
<a href="#" class="nsw-button nsw-button--highlight">Link</a>


//Action buttons
<button type="button" class="nsw-button nsw-button--highlight">Button</button>

<button type="submit" class="nsw-button nsw-button--highlight">Submit Button</button>

<button type="reset" class="nsw-button nsw-button--highlight">Reset Button</button>


//Input buttons
<input type="button" class="nsw-button nsw-button--highlight" value="Input Button">

<input type="submit" class="nsw-button nsw-button--highlight" value="Input Submit Button">

<input type="reset" class="nsw-button nsw-button--highlight" value="Input Reset Button">

 

Copy

Outline

The outline button is to be used on light backgrounds as a secondary button. 

//Link styled as button
<a href="#" class="nsw-button nsw-button--outline">Link</a>


//Action buttons
<button type="button" class="nsw-button nsw-button--outline">Button</button>

<button type="submit" class="nsw-button nsw-button--outline">Submit Button</button>

<button type="reset" class="nsw-button nsw-button--outline">Reset Button</button>


//Input buttons
<input type="button" class="nsw-button nsw-button--outline" value="Input Button">

<input type="submit" class="nsw-button nsw-button--outline" value="Input Submit Button">

<input type="reset" class="nsw-button nsw-button--outline" value="Input Reset Button">

 

Copy

White

The white button is to be used on dark backgrounds as a secondary button. 

//Link styled as button
<a href="#" class="nsw-button nsw-button--white">Link</a>


//Action buttons
<button type="button" class="nsw-button nsw-button--white">Button</button>

<button type="submit" class="nsw-button nsw-button--white">Submit Button</button>

<button type="reset" class="nsw-button nsw-button--white">Reset Button</button>


//Input buttons
<input type="button" class="nsw-button nsw-button--white" value="Input Button">

<input type="submit" class="nsw-button nsw-button--white" value="Input Submit Button">

<input type="reset" class="nsw-button nsw-button--white" value="Input Reset Button">

 

Copy

Buttons are designed bold and large to draw attention to key actions. 

There are four styles provided for use on different backgrounds to allow designers to suggest a bias or relative importance. 

Each button has a hover, focus and active state to give a visual affordance to show you can interact with it. 

Link styled as button

Use a link styled as a button to emphasize an important link.

Get startedFind out moreView all news

 

Action buttons

Use action buttons to perform an action which happens instantly.

 

Input buttons

Use an input button to submit a form. 

 

Button styles

By default the primary button should be used for the primary call to action. As an alternative, the highlight button can be used, especially where it has been customised to your brand. 

Use the outline or white button for secondary actions. 

Use a combination of primary or highlight buttons with outlined or white buttons to suggest relative importance, or to create a bias. 

Only use one primary or highlight button per page where possible.  

 

Guidance

Align buttons to the left of the page or form. 

Have the primary action first (on the left) and secondary actions after. 

Avoid the use of disabled buttons where possible, using progressive disclosure instead. 

The highlight button colour can be customised with your brand colour, where a brand exemption has been approved. 

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;

By default, the hover state is 20 percent highlight colour over black. Please use the colour contrast chart on the colour page to ensure sufficient contrast between the button and background and the button label and button colour. You will need to check this for each button state: default, hover, focus and active.