Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
appearance
accent | basic | bright
visual style (from Tag.appearances)
basic
icon
Icon
Icon component, right-aligned
isPressed
boolean
for accessibility of tags used as toggles
false
size
small | medium
tag size (from Tag.sizes)
medium

Tags come in 3 styles. Tags may change appearance based on action.

Tags come in two sizes. Try to use the default size, medium, whenever possible.

A tag may contain an icon, consistently placed on the right. An icon may also receive on onClick prop in this position.

A tag may made actionable by adding an onClick or href. If it's actionable, a standard hover state is present.

A tag is sometimes used as a toggle. The toggled-on state is trigged with the isPressed prop. It will handle styling and accessibility concerns. Controlling applications are in charge of storing toggled state.