Tag

Compact element to display information about an entity.

View source code

Variant

The Tag comes with two main visual styles: status and decorative.

Status

Alert

Warning

Info

Success

Neutral

<>
  <Tag iconName="hexagone-cross" variant="alert">
    Alert
  </Tag>
  <Tag iconName="triangle-warning" variant="warning">
    Warning
  </Tag>
  <Tag iconName="circle-information" variant="info">
    Info
  </Tag>
  <Tag iconName="circle-check" variant="success">
    Success
  </Tag>
  <Tag iconName="clock-filled" variant="neutral">
    Neutral
  </Tag>
</>

Decorative

CarbonGrolineForestLemonOceanPurplePinkPeachWhite

<>
  <Tag variant="carbon">Carbon</Tag>
  <Tag variant="grolive">Groline</Tag>
  <Tag variant="forest">Forest</Tag>
  <Tag variant="lemon">Lemon</Tag>
  <Tag variant="ocean">Ocean</Tag>
  <Tag variant="purple">Purple</Tag>
  <Tag variant="pink">Pink</Tag>
  <Tag variant="peach">Peach</Tag>
  <Tag variant="white">White</Tag>
</>

Use an icon

Use the iconName prop to set a icon on the left side of the Tag.

My tag

<Tag variant="purple" iconName="plane">
  My tag
</Tag>

With close button

My tag

<Tag variant="purple" onClose={() => {}}>
  My tag
</Tag>