Tags

Tags communicate a specific state of information to the user. For example, the amount of posts queued up within a user's connected account. less/components/Tag.less provides a number of predefined tag styles, which are documented below, for most use cases.

Tag

A div or span node with a class of Tag sets its padding property value to 2px 8px, its font-size property value to 11px, its font-weight property value to 600, its color property value to $shuttle-gray, its background-color property value to @geyser, and its border-radius property value to @border-radius-level-1.

To use it, give a div or span node a class of Tag.

Text label

Modifiers

Tag--margin-right

This modifies adds a margin-right property value of 8px.

Tag 1
Tag 2

Tag--state-error

This modifies a the color property value to @white and the background-color property value to @torch-red.

Text label

Tag--type-primary

This modifies a the color property value to @white and the background-color property value to @curious-blue.

Text label