Tag

• Usage
ExamplesCode

A Tag is a small piece of information encapsulated, in a structure that differentiates it from the context in which it is inserted.

They must be used to classify or categorize information within the product and must contain a text label.

Clickable

The interacting Tag can have links or trigger an action. Use this type of tag when you are allowed to send the user to a different screen or stream.

System

The system Tag is the one that the product includes in the interface. It must respect the semantics of colors and cannot be removed. Example: "New" or "Upgrade" tags, which usually appear next to features.

Removable

Tag inserted in the system by the users. It should appear in "default" style and can be removed. Removable tags have an "X" icon to remove them from the system.

The Autocomplete component and the Filters< pattern, which use Tag, have this behavior.

Good habits

• All tags must have a text, which can also have an icon or a close button, but never just icons
• Excessive use of Tag can leave the interface "polluted" and end up making it difficult to identify information. Use without exaggeration
• Tag, in general, should have texts. To display the count of some information, use Badges
• By default, the width of the Tag respects the size of the label. If necessary, it is possible to "truncate" the label
• Tag labels should never break into two or more lines. To display the full Tag label, use Tooltip

Usage

Tag usage table

Tag	Kind	Text	Usage
Tag label	Default	Uppercase (system) Case sensitive (user)	"BETA" feature tags (upper case). Tags added by the user (case sensitive). User-added tags may be removed.
TAG LABEL	Primary	Uppercase	Tags for new features or product releases.
TAG LABEL	Positive	Uppercase	You can use Tags to give positive feedback to people.
TAG LABEL	Negative	Uppercase	You can also apply the Tag to give negative feedback and call attention to necessary critical action.
TAG LABEL	Warning	Uppercase	You can apply the Tag to give alert feedback and call attention to an important action.
TAG LABEL	Info	Uppercase	Tags for additional information or help. Feature tags that are only accessible with a plan upgrade.

Feedback