Fancy Tag

A raised tag: a user-circle glyph, a label and a close cross, lifted by a soft shadow and an inner highlight. It can be active in grey or brand.

Alex MorganDesign teamQ4 launch

Cara BrookResearchArchived

import { SkeuomorphicTag } from '@orvain/react';
 
<SkeuomorphicTag>Design</SkeuomorphicTag>
<SkeuomorphicTag pill showCancelIcon onDismiss={() => remove('design')} dismissAriaLabel="Remove Design">
  Design
</SkeuomorphicTag>
 
// Toggle
<SkeuomorphicTag selectedTone="brand" onSelectedChange={(on) => setOn(on)}>Design</SkeuomorphicTag>

Add an Orvain Fancy Tag, labelled “Tag”, square corners, with a left icon and a cancel icon.

Orvain MCPIncluded with the library

When to use#

For categories on cards and headers, where a plain tag looks too small.
For a short set of featured topics or integrations to choose from.

When not to use

Use a Tag inside dense tables and form fields.

Anatomy#

1Container

26px, 6px sides, 8px radius (256 as a pill), white.

2Lift

A four-step soft shadow, a 1px #f2f2f2 ring and an inner highlight.

3Icons

A 16px user circle before the label and a 14px × after it.

4Label

Satoshi Medium 12 in #6d6d6d.

States#

Default

Raised.

Hover

The highlight softens.

Focused

A 1px #e1e1e1 stroke and a ring outside, for keyboard focus only.

Active - Grey

The ring turns #070707 and the label primary.

Active - Brand

Brand fill, white text and icons, a tighter lift.

Disabled

Flat #f2f2f2 with #cbcbcb text.

Source#

Preview – final code pending

The Fancy 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

cards filters