Tag

A tag labels UI objects for quick recognition and navigation.

#Default

The default form of a tag, where text is required.

Design

import { Tag } from '@wolf-rayet/react';

<Tag text="Design" />

#Removable

Give a tag a remove button when people can take the label off.

DesignResearch

import { Tag } from '@wolf-rayet/react';

<Tag text="Design" removeButtonLabel="Remove Design" />
<Tag text="Research" removeButtonLabel="Remove Research" />

#Linked

Use a link when the tag takes people to the object it names.

Billing queue

import { Tag } from '@wolf-rayet/react';

<Tag text="Billing queue" href="#" />

#Colors

Use a colour to group tags that belong together.

StandardBlueGreenRedOrangePurpleTealMagenta

import { Tag } from '@wolf-rayet/react';

<Tag text="Standard" />
<Tag text="Blue" color="blue" />
<Tag text="Green" color="green" />
<Tag text="Red" color="red" />
<Tag text="Orange" color="orange" />
<Tag text="Purple" color="purple" />
<Tag text="Teal" color="teal" />
<Tag text="Magenta" color="magenta" />

#Rounded

Use rounded tags where the label reads as a chip rather than a field value.

EscalatedResolved

import { Tag } from '@wolf-rayet/react';

<Tag text="Escalated" isRounded color="red" />
<Tag text="Resolved" isRounded color="green" />

#Tag group

A tag group controls the layout and alignment for a collection of tags.

import { Tag, TagGroup } from '@wolf-rayet/react';

<TagGroup>
  <Tag text="Billing" removeButtonLabel="Remove Billing" />
  <Tag text="Refunds" removeButtonLabel="Remove Refunds" />
  <Tag text="Chargebacks" removeButtonLabel="Remove Chargebacks" />
  <Tag text="Onboarding" removeButtonLabel="Remove Onboarding" />
</TagGroup>