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 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 @gov.au/buttons
  • Petra Gulicher avatar picture
  • Hannah J. Nicdao avatar picture
  • Alex Page avatar picture
  • Gary Broadbent avatar picture
  • Alexander Sadleir avatar picture
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Patrick De Young avatar picture
  • Julian Fleetwood avatar picture

React Usage

<AUbutton>Primary button</AUbutton>
<AUbutton as='secondary'>Secondary button</AUbutton>
<AUbutton as='tertiary'>Tertiary button</AUbutton>

<AUbutton block>Block button</AUbutton>

<AUbutton dark>Block button</AUbutton>

<AUbutton as='secondary' dark block>
  Secondary dark block button


Prop name Type Description
link string If an link is set the button will render as a link
linkComponent string The component used for the link, optional
as string The kind of button, secondary,tertiary
block boolean The block option to make the button fill the available width
dark boolean A dark variation of the component

All other props are spread into the component


Name Type Description
AUbuttons default The button component

node_modules import

import AUbuttons from '@gov.au/buttons';

pancake import

import AUbuttons from './buttons';