BRAID
Braid Logo
 

TextLinkButton

Visually a link, with button semantics
Open in Playroom

Alternatives

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

Accessibility

Even though it looks like a TextLink, this is actually a semantic button following the WAI-ARIA Button Pattern.Rather than rendering a native button element, we render a span element with an ARIA role of button so that text can wrap across multiple lines.

Note

This component must be nested within a Text or Heading component.

Icons

For decoration or help distinguishing between buttons, an icon can be provided. This will be placed to the left of the label.
TextLinkButton
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.
Open in Playroom