BRAID
Braid Logo
 

Button

Open in Playroom

Alternatives

  • 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

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

Icons

You can add an icon to the button by nesting an icon element inside. The size of the icon will adjust automatically based on the size on the button.
Standard size
Small size
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

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

Contextual design

The ghost, soft, and transparent variants are inverted when rendered on a dark background.
When using custom backgrounds or images, this behaviour can be applied using the BackgroundProvider and specifying whether the background is dark or light.
Open in Playroom

Vertical bleed

With the bleedY prop, you can allow the background colour to bleed out into the surrounding layout.
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 bleedY prop in this case, the button would introduce unwanted space above and below the heading.
Standard size

Heading

Small size

Heading

Open in Playroom