Tag

Compact UI to display a collection of concise information.

When to use

  • When displaying a list of tags.

Tag basic Usage

defaultlong text inside the tag

Tag Kinds Prop Type

neutralprimarypositivewarningnegative

Tag Variants Prop Type

solidlightoutlined

Tag closeable/non-clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag closeable/clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag in a disabled state

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag non-closeable/non-clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag non-closeable/clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag Custom Color example

custom
custom
custom

Overrides

Additionally, you can fully customize any part of the Tag through the overrides prop. The Tag consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Tag

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Tag API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>