Best Practices

Properties

Value	Usage
`primary`	Value is related to the main job and it’s crucial for merchants to take immediate action such as changing sales strategies or fixing security issues.
`secondary`	Value is not related to the main job. For example, when accessing that products page the merchant may not be interested in the product status.

Value	Usage	Example
`gray`	Value can’t be classified or requires less attention.	Archived
`blue`	Value contains information about the system and doesn’t require the merchant to act.	Indexing
`red`	Value contains negative information and/or require action.	Error or Canceled
`orange`	Value requires action and is not related to an error.	Draft
`green`	Value contains positive information, such as the status of an item that is matching or surpassing expectations.	Active
`cyan`, `teal`, `purple`, or `pink`	Value doesn’t have a clear semantic but should be easy to quickly identify and visually differentiate.	App categories

Size	Usage
`normal`	Next to text using $text-body, $title-display3, or $title-display4.
`large`	Next to text using $title-display1 or $title-display2.

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

Considering left-to-right interfaces:

Position in a container: Prefer to position the Tag next to a title or label. Don’t position it on the top-right of a container.
Position in a table: Position a column with Tags as one of the last columns, such as immediately before the column with Menu triggers.
Position in a header: Position the Tag on the right side of the title and left-aligned.
Space around a tag and between tags: Consider a safe space around Tags of at least $space-3 horizontally and $space-2 vertically. Separate multiple Tags with $space-3 in horizontal lists and $space-2 in vertical lists.

Tags shouldn’t be clickable, removable, or editable. Nothing should happen on hover or click.