dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Buttons

v3.0.7

Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.

Released

History
View changes
Install
npm i @gov.au/buttons
Tags
Requires
Contributors
  • Patrick De Young avatar picture
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent avatar picture
  • Alexander Sadleir avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Alex Page avatar picture

Wayfinding

There are multiple variations of our button component to allow for different variations of visual loudness. This allows designers to balance visual priority of content throughout the interface.

You can see an example of how a user with low literacy can use visual loudness to help complete there task.

Our buttons can be implemented as links ( <a> ) or as buttons ( <button> ). We provide the flexibility so users can make the most semantic markup possible. Using incorrect HTML in certain situations can cause accessibility issues.

Underline on hover

Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Note Focus state is not underlined as it is conveyed using the global focus outline.

Round corners

It was discovered during usability observation that the secondary button and text inputs could sometimes be mistaken for layout or design elements with borders. The border-width was increased, and a border-radius was added to interactive elements.

Note The border-radius is removed on focus. This is because the focus outline does not receive the radius.

Note The border-radius is not supported in IE8.