data · Normal DOM only

Tag

Compact coloured pill — picks a colour from Twenty's 30-tone palette (--t-tag-text-* / --t-tag-background-*).

Use Tag for short labels on records: stage, status, category, ownership. The colour itself is the data — the user reads it before the text. Always store the colour name (`"blue"`) not a hex.

Inside a Twenty front-component, prefer the bridge import

This Tag is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Tag } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Tag, TAG_COLOR_NAMES } from '@8maverik8/twenty-design';

Examples

All 30 colours

graymauveslatesageolivesandtomatoredrubycrimsonpinkplumpurplevioletiriscyanturquoiseskybluejadegreengrassmintlimebronzegoldbrownorangeamberyellow

tsx
<Tag color="blue">blue</Tag>

Sizes + removable

smallmediumremovable

tsx
<Tag color="blue" size="sm">small</Tag>
<Tag color="orange" onRemove={…}>removable</Tag>

Guidelines

✓

Use ColorPicker for "user chooses a colour".Same palette, named storage, consistent picker UX.

Use Tag for actions.A tag with onClick reads as a value — for an action use Button or Chip.