Tag

Small label representing data like a status or a property.

Figma componentStorybook documentation

Tag

React

<Tag>Tag</Tag>

CSS

<p class="tag">Tag</p>

Props

Color

Primary

Secondary

Grey

Success

Info

Warning

Error

React

<Tag>Primary</Tag>
<Tag color="secondary">Secondary</Tag>
<Tag color="grey">Grey</Tag>
<Tag color="success">Success</Tag>
<Tag color="info">Info</Tag>
<Tag color="warning">Warning</Tag>
<Tag color="error">Error</Tag>

CSS

<p class="tag">Primary</p>
<p class="tag tag-secondary">Secondary</p>
<p class="tag tag-grey">Grey</p>
<p class="tag tag-success">Success</p>
<p class="tag tag-info">Info</p>
<p class="tag tag-warning">Warning</p>
<p class="tag tag-error">Error</p>

Dense

Dense

React

<Tag dense>Dense</Tag>

CSS

<p class="tag tag-dense">Dense</p>