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">
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">
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">
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">
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.