TextLinkButton

Visually a link, with button semantics

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

Braid Logo