Tag

A compact chip for a value that has been applied or can be selected, such as a label, filter or skill. Tags can be removed or toggled.

DesignRemoteFull-timeFeeling great

Alex Morgan

United Kingdom

Gmail(4)Starred(4)

import { Tag } from '@orvain/react';
 
<Tag>Design</Tag>
<Tag pill>Engineering</Tag>
<Tag dismissible onDismiss={() => remove('design')} dismissAriaLabel="Remove Design">
  Design
</Tag>

Add a basic Orvain Tag (1.0), stroke appearance, labelled “Tag”, square corners, no dismiss icon.

Orvain MCPIncluded with the library

When to use#

To show values applied to an item, each with a remove button.
As a set of filters or topics that toggle on and off.

When not to use

Use a Badge for a read-only status.

Anatomy#

1Container

Tag 1.0: 26px, 6px radius, Stroke or Gray. Tag 2.0: 32px with a 24px icon square, 8px radius.

2Leading

1.0: a smile icon, an avatar, a flag or a logo. 2.0: a star in its square.

3Label and sub-label

Satoshi Medium 12, with an optional Regular count such as (4).

4Dismiss

A small × after the label, a real button with a 24px hit area.

States#

Default

At rest: a hairline on white, or a 4% grey.

Hover

1.0 swaps the two appearances; 2.0 turns grey with primary text.

Focused

A ring outside the tag, for keyboard focus only (2.0).

Active / Selected

1.0 Stroke: brand outline and label. 1.0 Gray and 2.0: brand fill, white text.

Read-Only

2.0: grey fill, primary text, no hover.

Disabled

Grey fill and #cbcbcb text; images drop to 48%.

Source#

Preview – final code pending

The Tag is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

tag inputs filters