Buttons

v4.0.0

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

Default

A strong button style used for primary actions on a screen such as a Submit button on a form, or other actions that are critical in a user workflow. A primary button should be only used once per view.

Example

<!--
  Light:  <div class="au-btn">
  Dark:   <div class="au-btn au-btn--dark">
-->

<button class="au-btn">
  Primary button
</button>

/*
  Light:  <AUbutton>
  Dark:   <AUbutton dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton>
  Primary button
</AUbutton>

Secondary

A standard button style used to highlight an important action such as a Save button on a form. (A secondary button assumes there is already a primary button.)

Example

<!--
  Light:  <div class="au-btn au-btn--secondary">
  Dark:   <div class="au-btn au-btn--secondary au-btn--dark">
-->

<button class="au-btn au-btn--secondary">
  Secondary button
</button>

/*
  Light:  <AUbutton as='secondary'>
  Dark:   <AUbutton as='secondary' dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton as='secondary'>
  Secondary button
</AUbutton>

Tertiary

A light button style used for tertiary actions on a screen such as a Cancel button on a form. (A tertiary button assumes there is already a secondary button.) Typically it performs the opposite action to the secondary button (e.g. Cancel vs Save).

Example

<!--
  Light:  <div class="au-btn au-btn--tertiary">
  Dark:   <div class="au-btn au-btn--tertiary au-btn--dark">
-->

<button class="au-btn au-btn--tertiary">
  Tertiary button
</button>

/*
  Light:  <AUbutton as='tertiary'>
  Dark:   <AUbutton as='tertiary' dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton as='tertiary'>
  Tertiary button
</AUbutton>

Disabled

A button that can’t be clicked and doesn’t react to hover. A disabled button is typically greyed out to indicate to users that they cannot undertake the action associated with it. This is usually for page logic reasons.

Example

<!--
  Light:  <div class="au-btn" disabled>
  Dark:   <div class="au-btn au-btn--dark" disabled>
-->

<button class="au-btn" disabled>
  Disabled button
</button>

<button class="au-btn au-btn--secondary" disabled>
  Disabled secondary button
</button>

<button class="au-btn au-btn--tertiary" disabled>
  Disabled tertiary button
</button>

/*
  Light:  <AUbutton disabled>
  Dark:   <AUbutton disabled dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton disabled>
  Disabled button
</AUbutton>

<AUbutton secondary disabled>
  Disabled secondary button
</AUbutton>

<AUbutton tertiary disabled>
  Disabled tertiary button
</AUbutton>

Block

A block-level button uses 100% of the available width of the container or parent element. A block- level button is used for visual prominence.

Example

<!--
  Light:  <div class="au-btn au-btn--block">
  Dark:   <div class="au-btn au-btn--block au-btn--dark">
-->

<button class="au-btn au-btn--block">
  Primary block button
</button>

<button class="au-btn au-btn--block au-btn--secondary">
  Secondary block button
</button>

<button class="au-btn au-btn--block au-btn--tertiary">
  Tertiary block button
</button>

/*
  Light:  <AUbutton disabled block>
  Dark:   <AUbutton disabled block dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton secondary>
  Primary block button
</AUbutton>

<AUbutton secondary>
  Secondary block button
</AUbutton>

<AUbutton tertiary>
  Tertiary block button
</AUbutton>

Simple links don’t always catch a user’s attention when they’re scanning a website. So a link is sometimes styled to look like a button where you want to give it greater prominence.

Example

<!--
  Light:  <a href="#" class="au-btn">
  Dark:   <a href="#" class="au-btn au-btn--dark">
-->

<a href="#" class="au-btn">
  Primary link button
</a>

<a href="#" class="au-btn au-btn--secondary">
  Secondary link button
</a>

<a href="#" class="au-btn au-btn--tertiary">
  Tertiary link button
</a>

/*
  Light:  <AUbutton link="#">
  Dark:   <AUbutton link="#" dark>
*/

import AUbutton from '@gold.au/buttons';

<AUbutton link="#">
  Primary link button
</AUbutton>

<AUbutton secondary link="#">
  Secondary link button
</AUbutton>

<AUbutton tertiary link="#">
  Tertiary link button
</AUbutton>

Related components

Feedback