data · Normal DOM only

Status

Coloured pill or dot indicating a deal / record / system state. Three variants: solid, soft, dot.

Use Status when the colour itself communicates state ("won" = green, "lost" = red). solid = filled background (high emphasis), soft = tinted background (default), dot = bullet next to a label (compact lists).

Inside a Twenty front-component, prefer the bridge import

This Status is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Status } 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 { Status } from '@8maverik8/twenty-design';

Examples

Solid · soft · dot

WonQualifiedLostPendingLiveOffline

tsx
<Status color="green" variant="solid">Won</Status>
<Status color="blue" variant="soft">Qualified</Status>
<Status color="green" variant="dot">Live</Status>

Guidelines

✓

Use dot variant in dense tables where space is tight.The dot reads as state without taking a whole cell.

Use Status for free-form tags.A Status implies a discrete machine state. For arbitrary labels use Tag.