Tag

What is this?

Tag indicators allow merchants to differentiate items through a read-only text value in a prominent container.

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

Components

When to use a Select Inline, a Switch or a Text instead of a Tag?

• Choose a Select Inline when there are more than two possible values and the merchant can alternate between them.
• Choose a Switch when the value is the state of an item and there are two possible values that can be alternated.
• Choose a Text when the value can't be edited, doesn't require prominence and isn't positioned next to another value.

Variants

When to use each Tag color?

• Use gray for values that can't be classified, such as Category page, and for values that require less attention, such as Archived.
• Use lightBlue for information about the system that doesn't require the merchant to act, such as Indexing.
• Use red for values that require the merchant to act, such as Error, or for negative information, such as Canceled.
• Use orange for values that reflect a pending action from the merchant unrelated to an error, such as Draft.
• Use green for values that indicate that an item is matching or surpassing expectations, such as Active.
• Use cyan, teal, purple or pink for values without a clear semantic that can benefit from visual prominence or that should be visually differentiated by the merchant, such as app categories.

When to use each Tag size?

• Use the normal Tag size next to $body, $title1, or $title2 text.
• Use the large Tag size next to $pageTitle or $display text.

Position

What should be the position of a Tag in a container?

Consider the following recommendations:

• Position the Tag close to related information, such as a title or label.
• Clear blank space around the Tag of at least $space-3 horizontally and $space-2 vertically.
• Separate multiple Tags with $space-3 when listed horizontally and $space-2 when listed vertically.
• In a Table, Tags should be one of the last columns, immediately before any column with Menu triggers.
• In the header of a container, position the Tag on the right side of the title and left-aligned.

What to avoid:

• Don't apply bleed to the Tag. Prefer to position the Tag by its container.
• Don't position the Tag on the top-right of a container. Prefer to position the Tag next to a title or label.

Behavior

What should happen when a Tag is hovered or clicked?

Nothing should happen, because the Tag should not be clickable, removable, or editable.

What to avoid:

Don't open a Tooltip when a Tag is hovered.

Content

What should be the value of a Tag?

• Write the value of a property, such as Active, or a label, such as Category page.
• Write as short and direct of a value as possible. For example, write Pending payment instead of Waiting for payment.
• Use sentence case.

What to avoid:

• Don't write text longer than 30 characters.
• Don't use a label and a value at the same time. For example, write only Active instead of Status: active.
• Don't use punctuation or separators.

• What is this?
• Examples
  • Variants
  • Sizes