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.


View changes
npm i @gold.au/buttons
  • Hannah J. Nicdao avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Monica Gee avatar picture
  • Alexander Sadleir avatar picture
  • Patrick De Young avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Petra Gulicher avatar picture


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.