Tag

What is this?

Tags represent a status, or a common denominator. They make sections and entities quickly identifiable and searchable.

Examples

Variants

By default, the variant property has the 'lightBlue' value, but you can also set it to the following values: 'red', 'orange', 'green', 'cyan', 'teal', 'gray', 'purple' and 'pink'.

Short text

Short text

Short text

Short text

Short text

Short text

Short text

Short text

Short text

Sizes

By default, the size property has a 'normal' value, but you can also set it to 'large'.

Short text

Short text

Usage

import { Tag } from '@vtex/admin-ui'

function Example() {
  return <Tag label="Short text" />
}

Props

Name	Type	Description	Required	Default
label	string	Tag label	✅	-
csx	StyleObject	Custom styles	🚫	{}
variant	lightBlue, green, red, orange, cyan, teal, purple or pink	Tag theme	🚫	gray
size	normal, large	Tag size	🚫	normal

Do's

1. Use semantic colors that have a clear and contextualized meaning in your application, such as green for success and red for errors. However, if your application employs a richer palette with unambiguous usage of colors don't hesitate to use your Tags with them.
2. They should always be read-only.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• What is this?
• Examples
  • Variants
  • Sizes