Skip to main contentCarbon Design System

Tag

Preview the tag component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

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