BRAID
Braid Logo
 

Button

Open in Playroom

Alternatives

  • ButtonIcon — For buttons containing only an icon.
  • ButtonLink — For a semantic link that looks like a button.
  • TextLinkButton — For a semantic button that looks like a link.

Variants

You can customise the appearance of the button via the variant prop, which accepts either solid, ghost, soft or transparent.
Open in Playroom

Branding

For hero actions that want to leverage the brand colour, you can set the button’s tone to brandAccent.
Open in Playroom

Destructive actions

For destructive actions like “Delete” you can set the button’s tone to critical.
Open in Playroom

Emphasizing actions

For cases where actions need to be emphasized, the tone can be set to formAccent.
Open in Playroom

De-emphasized actions

For cases where actions need to be de-emphasized, the tone can be set to neutral.This makes the button follow the default text colour, including inverting on dark surfaces to improve contrast.
Open in Playroom

Disabled actions

A Button cannot be disabled. This is a deliberate design decision to encourage more accessible patterns that inform the user about what is required to progress.For example, when designing a form, instead of disabling the submit button when a required field is missing, allow the user to attempt to submit and fail. Validation feedback can then be provided informing the user of what they must do to progress.

Sizes

You can customise the size of the button via the size prop, which accepts either standard or small.
Standard size
Small size
Open in Playroom

Choosing the right button

By default, a button has a neutral tone and uses the ghost 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 ghost variant:
To compliment this, when a tone is purposefully 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 a tone is applied:
As the approach to colour in our experiences has changed over time, so too has the default visual prominence for buttons. For this reason, older themes such as apac and seekBusiness continue to have the default tone of formAccent and a solid variant.
Historical default was the formAccent tone and solid variant:

Icons

For decoration or help distinguishing between buttons, an icon can be provided.
Standard size
Small size
Open in Playroom
By default, an icon will be leading the label, however this can be customised by setting the iconPosition to trailing.
Open in Playroom

Loading Button

You can indicate a loading state inline with the loading prop, which also ensures that the button is disabled.
Open in Playroom

Contextual design

The ghost, soft, and transparent variants automatically lighten their foreground colour to improve contrast against a dark background. To compliment this, the hover and active backgrounds remove the colour in favour of a white translucency.When using custom background colours or images on a Box component, this behaviour can be applied by setting the background to either customLight or customDark.
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 label itself.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 bleed prop in this case, the button would introduce unwanted space above and below the heading.
Standard size alignment

Heading

Small size alignment

Heading

Transparent variant alignment

Heading

Open in Playroom

Data attributes

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.
<Button
  data={{ testid: 'button-1' }}
  // => data-testid="button-1"
>
  ...
</Button>
Open in Playroom