Tag – Carbon Design System

Use tags to label, categorize, or organize items using keywords that describe them.

Overview
Live demo
Feedback

Overview

Multiple or single tags can be used to categorize items.

Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

When to use

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.

Live demo

Theme selector

Red

Magenta

Purple

Blue

Cyan

Teal

Green

Gray

Cool gray

Warm gray

CodeSandbox React Angular Vue Vanilla

Live editor for the Tag component


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

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub

Components: Tabs

Tag: Style