vic_logo

Buttons - Design System

Help your users perform common actions.

Usage

Buttons are used to highlight calls to action for users to take, such as making a booking. They can link to other pages in your site or to external websites. Use them sparingly - try not to use more than one button in any single group of content.

Examples

Primary buttons

The button is blue and changes to a lighter blue when the mouse is hovering over it.

A visual example of primary buttons.

Secondary buttons

Secondary buttons are a lighter shade of blue. They are only used if a second action is needed in addition to a primary action, for example a 'Submit' and 'Cancel' button.

A visual example of secondary buttons.

How to build buttons

A button can be added to any content template. You need to be in a Basic text content component.

To insert a button:

  1. Put your cursor on its own line.
  2. Click the small page icon and choose primary/secondary button. 
  3. You’ll see some dummy text (hyperlinked) on your screen.
  4. Replace it with your button text. The easiest way to do this is:
    • put your cursor after the first letter
    • type your button label
    • use the delete and backspace buttons to delete the dummy part of the text.
    • (Another way is to click on the Source button and change in the HTML code, but only do this if you're confident with HTML.)
  5. Put your cursor within the hyperlinked label text and click on the Link icon. You’ll see a popup.
  6. In the URL field, delete ‘Primary-button-link’ and:
    • if it’s a link to a page in the CMS, start typing the title of your destination page; choices will appear; select the correct page title
    • if it's a link to an external site, copy and paste the URL, including https://
  7. Type a title and click Save.

Reviewed 21 November 2019

Get support using SDP

Our community of practice for anyone with content on SDP meets once every 2 months. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact nicole.shilo@dpc.vic.gov.au

Was this page helpful?