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.
By default, the button adopts the neutral tone. Actions can be emphasised by setting the tone prop to formAccent, or to brandAccent for the most important actions.
By default, a button has a neutral tone and uses the soft variant, allowing the visual prominence to be increased or decreased as required.This enables colour to be applied as accents and with purpose, rather than by default — improving the management of user attention and supporting a more declarative hierarchy of actions.
Default is a neutral tone and soft variant
To compliment this, when an accent tone is applied to a button, the default variant becomes solid to maximise its impact — allowing the visual prominence to be reduced as needed.
Default variant becomes solid when an accent tone is applied
The button size can be customised via the size prop, which accepts either small, standard (default) or large.
The standard and large sizes both follow the standard text definition from the theme, where standard follows the text size and large follows the line height.
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.
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.
By default, we apply the bleed to the ”transparent” variant, ensuring it does not introduce surrounding white space.
Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.