Open in Playroom
  • Button For a semantic button.
  • ButtonLink For a semantic link that looks like a button.
Follows the WAI-ARIA Button Pattern.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
Open in Playroom
The button size can be customised via the size prop, which accepts either small, standard (default) or large.
SMALL
STANDARD
LARGE
Open in Playroom
By default, the button adopts the neutral tone, however, actions can be emphasised by setting the tone prop to formAccent.
NEUTRAL
FORMACCENT
Open in Playroom
By default, the label is presented as a tooltip on top of the button. However, this can be configured via the tooltipPlacement prop, which accepts either top or bottom. See TooltipRenderer for more information.
TOP
BOTTOM
Open in Playroom
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

Open in Playroom