• ButtonIcon For buttons containing only an icon.
  • ButtonLink For a semantic link that looks like a button.
  • TextLinkButton For a semantic button that looks like a link.
You can customise the appearance of the button via the variant prop, which accepts either solid, ghost, soft or transparent.
For hero actions that want to leverage the brand colour, you can set the button’s tone to brandAccent.
For destructive actions like “Delete” you can set the button’s tone to critical.
For cases where actions need to be emphasized, the tone can be set to formAccent.
For cases where actions need to be de-emphasized, the tone can be set to neutral.
This makes the button follow the default text colour, including inverting on dark surfaces to improve contrast.
A Button cannot be disabled. This is a deliberate design decision to encourage more accessible patterns that inform the user about what is required to progress.
For example, when designing a form, instead of disabling the submit button when a required field is missing, allow the user to attempt to submit and fail. Validation feedback can then be provided informing the user of what they must do to progress.
You can customise the size of the button via the size prop, which accepts either standard or small.
Standard size
Small size
By default, a button has a neutral tone and uses the ghost variant, allowing the visual prominence to be increased or decreased as required.
This enables colour to be applied as accents and with purpose, rather than by default — improving the management of user attention and supporting a more declarative hierarchy of actions.
Default is a neutral tone and ghost variant:
To compliment this, when a tone is purposefully applied to a button, the default variant becomes solid to maximise its impact — allowing the visual prominence to be reduced as needed.
Default variant becomes solid when a tone is applied:
As the approach to colour in our experiences has changed over time, so too has the default visual prominence for buttons. For this reason, older themes such as apac and seekBusiness continue to have the default tone of formAccent and a solid variant.
Historical default was the formAccent tone and solid variant:
For decoration or help distinguishing between buttons, an icon can be provided.
Standard size
Small size
By default, an icon will be leading the label, however this can be customised by setting the iconPosition to trailing.
You can indicate a loading state inline with the loading prop, which also ensures that the button is disabled.
The ghost, soft, and transparent variants automatically lighten their foreground colour to improve contrast against a dark background. To compliment this, the hover and active backgrounds remove the colour in favour of a white translucency.
When using custom background colours or images on a Box component, this behaviour can be applied by setting the background to either customLight or customDark.
The bleed prop allows the background colour to bleed out into the surrounding layout — leaving the button to only take up the space required for the label itself.
For example, we can align a button to a Heading element using an Inline, even though the button is actually taller than the heading. If we didn’t use the bleed prop in this case, the button would introduce unwanted space above and below the heading.
Standard size alignment

Heading

Small size alignment

Heading

Transparent variant alignment

Heading