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
error
boolean
error state flag
false
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.

Error states are engaged with the error flag. This is useful when tags are used from within a form