BRAID
Braid Logo
 

ButtonIcon

Open in Playroom

Alternatives

  • Button — For a semantic button.
  • ButtonLink — For a semantic link that looks like a button.

Accessibility

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.

Variants

The button appearance can be customised via the variant prop, which accepts either soft or transparent.
SOFT
TRANSPARENT
Open in Playroom

Sizes

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
Open in Playroom

Tone

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
Open in Playroom

Tooltip Placement

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

Bleed

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