Tag – Carbon Design System

Red Magenta Purple Blue Cyan Teal Green Gray Cool gray Warm gray


  <>
<Tag type="red" title="Clear Filter"> Red </Tag>
<Tag type="magenta" title="Clear Filter"> Magenta </Tag>
<Tag type="purple" title="Clear Filter"> Purple </Tag>
<Tag type="blue" title="Clear Filter"> Blue </Tag>
<Tag type="cyan" title="Clear Filter"> Cyan </Tag>
<Tag type="teal" title="Clear Filter"> Teal </Tag>
<Tag type="green" title="Clear Filter"> Green </Tag>
<Tag type="gray" title="Clear Filter"> Gray </Tag>
<Tag type="cool-gray" title="Clear Filter"> Cool gray </Tag>
<Tag type="warm-gray" title="Clear Filter"> Warm gray </Tag>
</>


  <>
<Tag type="red" title="Clear Filter"> Red </Tag>
<Tag type="magenta" title="Clear Filter"> Magenta </Tag>
<Tag type="purple" title="Clear Filter"> Purple </Tag>
<Tag type="blue" title="Clear Filter"> Blue </Tag>
<Tag type="cyan" title="Clear Filter"> Cyan </Tag>
<Tag type="teal" title="Clear Filter"> Teal </Tag>
<Tag type="green" title="Clear Filter"> Green </Tag>
<Tag type="gray" title="Clear Filter"> Gray </Tag>
<Tag type="cool-gray" title="Clear Filter"> Cool gray </Tag>
<Tag type="warm-gray" title="Clear Filter"> Warm gray </Tag>
</>

General guidelines

Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.

Multiple or single tags can be used to categorize items.

Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them.

Tags can also be used as a method of filtering data, to show only items within that particular category.

Edit this page on GitHub

Components: Tabs

Tag: Style