• 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
You can add an icon to the button by nesting an icon element inside. The size of the icon will adjust automatically based on the size on the button.
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.
The ghost, soft, and transparent variants are inverted when rendered on a dark background.
When using custom backgrounds or images, this behaviour can be applied using the BackgroundProvider and specifying whether the background is dark or light.
With the bleedY prop, you can allow the background colour to bleed out into the surrounding layout.
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 bleedY prop in this case, the button would introduce unwanted space above and below the heading.
Standard size

Heading

Small size

Heading