• 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.
You can customise the size of the button via the size prop, which accepts either standard or small.
Standard size
Small size
For decoration or help distinguishing between buttons, an icon can be provided. This will be placed to the left of the label.
Standard size
Small size
You can indicate a loading state inline with the loading prop, which also ensures that the button is disabled.
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 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.
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