A NSW Government website

Our website uses an automatic service to translate our content into different languages. These translations should be used as a guide only.

NSW Government
demo dds
Department of Demonstrations

Buttons

A call-to-action styled as a DS button — an anchor with a style, optional icon, and full-width option.

What it is

A button is a call-to-action styled link — an anchor that looks like a DS button. Use it for the primary action on a page (Start, Apply, Download). It is a link: it navigates. For a real form action (submit / reset) use a Form block, not a button.

Buttons

How to add it

Add a Button block and set its link first: point it at a page on this site and the button takes that page's title as its label, and keeps it if the page is renamed. Type your own label over it whenever an action reads better than a page name — “Start your application” rather than “Applications” — and that button stops following the page. An external address has no title to take, so you write those yourself. Then pick a style: Brand dark is the default; the light and white styles are made for dark backgrounds. Optionally add a Material icon (before or after the label) and make it full-width.

Add a Button, type its label, then pick a style

Configure it

Tips

Use one primary (solid) button per section — the outline styles are for secondary actions. Write action-first labels (“Start your application”, not “Click here”).

The light and white styles below are shown for reference; they are designed to sit on a dark background.

See Link list for a set of navigation links, and Form for interactive submit buttons.

Example

Brand dark

ButtonButtonButtonButtonButtonButton

Brand light and white (for dark backgrounds)

ButtonButtonButtonButtonButtonButtonButtonButton

Danger

ButtonButton