Tag

Install the component dependency:

Include a React component in your project:

NameValueDescriptionDefault
appearanceaccent | basic | brightvisual style (from Tag.appearances)basic
iconIconIcon component, right-aligned
isPressedbooleanfor accessibility of tags used as togglesfalse
sizesmall | mediumtag 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.