Skip to content
Telescope
Components

Tag

A static label that highlights an item's category or attribute.
Bookkeeper

Features

  • Available in various colors
  • Can optionally display an icon

When to use

To highlight an item's status, use a Badge instead.

Examples

Variants

The component comes in different colors, which are based on our brand colors. These can be used interchangeably and are not tied to any specific meaning.

Show code
<Stack space={16}>
    <Tag variant="pink">Pink</Tag>
    <Tag variant="yellow">Yellow</Tag>
    <Tag variant="green">Green</Tag>
    <Tag variant="purple">Purple</Tag>
    <Tag variant="gray">Gray</Tag>
</Stack>

Icons

An icon can be added next to the label. This can help users understand a tag's meaning. Icons can also make tags more recognisable and distinguishable. This is helpful in scenarios where multiple tags are used on a page or within a list.

Show code
<Stack space={16}>
    <Tag variant="pink" Icon={FlashCircle}>
        Pink
    </Tag>
    <Tag variant="yellow" Icon={CategoryMarketing}>
        Yellow
    </Tag>
    <Tag variant="green" Icon={EmotionSmiley}>
        Green
    </Tag>
    <Tag variant="purple" Icon={HighFive}>
        Purple
    </Tag>
    <Tag variant="gray" Icon={Sandwich}>
        Gray
    </Tag>
</Stack>

Best practices

Admin
Rejected
Do
Use to highlight an item's category or attribute..
Don't
Use to highlight an item's status. Use a Badge instead.
Admin
This user is an admin
Do
Use short, descriptive labels.
Don't
Use long labels.
Reimbursement
Custom
Do
Add an icon to support the tag's meaning.
Don't
Add an icon for purely aesthetic reasons.

Related components

  • Badge: A static label that highlights an item's status.
  • Callout: Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
  • Count: A static label that indicates the quantity of items.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page