Overview
A tag is a visual text label containing small amounts of color-categorized information.
They visually label items with small amounts of information or the item's status, usually with keywords that help organize and categorize them.
They are ideal for helping users quickly recognize important information about items that organize and categorize them.
Usage
Use a tag to show the information to catch the user's attention. It is commonly used for descriptive tags or filter items.
Use when you have data that helps categorize and organize things.
Use to visually label, categorize, or organize items using keywords that describe them.
Use short labels for easy scanning.
Use to show simple information that doesn't require interaction.
Anatomy
Label text: Keywords that help organize and categorize the items.
Container: Hold the label text and use color to categorize the information.
Variants & Props
Semantic Variants: When tags have a semantic meaning, they use semantic colors.
Accessibility
Use an icon with these elements if color use conveys information such as error message, warning, or success message that the text doesn't convey. The icon is required so we do not use color as the sole means of conveying information.
Icon should have appropriate alt text to convey semantic meaning.