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

Secondary

The secondary button is to be used on light backgrounds as a secondary action 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

Danger

The danger button is NSW Primary Highlight and is used to confirm a destructive action, such as delete. 

//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

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. 

Use the secondary or white button for secondary actions. 

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

Only use one primary 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.