Best Practices

Components

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

gray: use for values that can't be classified, such as Category page, and for values that require less attention, such as Archived.
blue: use for information about the system that doesn't require the merchant to act, such as Indexing.
red: use for values that require the merchant to act, such as Error, or for negative information, such as Canceled.
orange: use for values that reflect a pending action from the merchant unrelated to an error, such as Draft.
green: use for values that indicate that an item is matching or surpassing expectations, such as Active.
cyan, teal, purple or pink: use 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.

normal: use next to $text-body, $title-display3, or $title-display4 text.
large: use next to $title-display1 or $title-display2 text.

regular: use when the information provided by the tag is as relevant as other information in the interface.
high: use when the tag has a high prominence in the interface and it should highlight very important information for the merchant.

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.
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.

When hovering or clicking a Tag nothing should happen, because the Tag should not be clickable, removable, or editable.
Don't open a Tooltip when a Tag is hovered.

Write a property, such as Active, or a category, such as Product page.
Write as short and direct of a label as possible. For example, write Pending payment instead of Waiting for payment.
Use sentence case.
Don't write text longer than 30 characters.
Don't use punctuation or separators. For example, write only Active instead of Status: active.