• Button For a semantic button.
  • ButtonLink For a semantic link that looks like a button.
Given the button contains only an icon (i.e. no text content), it is required that a label be provided. This will be both announced to a screen reader and presented visually using a TooltipRenderer.
The button appearance can be customised via the variant prop, which accepts either soft or transparent.
SOFT
TRANSPARENT
The button size can be customised via the size prop, which accepts either standard or large.
Both follow the standard text definition from the theme, where standard follows the text size and large follows the line height.
STANDARD
LARGE
By default, the foreground color of the icon follows neutral text, however, this can be de-emphasised via the tone prop by selecting secondary.
NEUTRAL
SECONDARY
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 icon itself.
BLEED

Heading

NO BLEED

Heading