BRAID
Braid Logo
 

Tag

One
Two
Three
Open in Playroom

Alternatives

  • Badge — For static labels.

Sizes

You can customise the size of the tag via the size prop, which accepts either standard or small.
STANDARD
One
Two
Three
SMALL
One
Two
Three
Open in Playroom

Actionable tags

Tags can be made actionable to support either being “cleared” or “added”.
By providing an onClear handler and a clearLabel, a ButtonIcon component with a clear icon will be added to the right of the tag label.
Alternatively, providing an onAdd handler and an addLabel will insert a ButtonIcon component with an add icon to the right of the tag label.
Translation hint The aria-label for the button can be customised by providing the relevant clearLabel or addLabel prop.
ADDABLE
Four
Five
CLEARABLE
One
Two
Three
Open in Playroom

Inserting an icon

For decoration or help distinguishing between tags, an icon can be provided. This will be placed to the left of the text.
One
Two
Three
Open in Playroom