data · Normal DOM only

Badge

Two shapes in one component: notification (count / dot anchored to a child) and label pill (standalone text tag).

Badge does two jobs depending on what props you pass. Pass `count` (or `dot`) + `children` to overlay a notification indicator in the top-right corner of that child. Pass `children` alone (no count, no dot) and Badge renders the children themselves as a coloured pill — useful for "ok", "new", "12" tags inline with text. Variants `primary` / `secondary` / `success` / `danger` choose the colour scheme in both modes.

Install

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

ts
import { Badge } from '@8maverik8/twenty-design';

Examples

Notification (count / dot anchored to a child)

34299+

Standalone indicator:5

tsx
<Badge count={3}><Button …>Notifications</Button></Badge>
<Badge count={150} max={99}><Button …>Tasks</Button></Badge>
<Badge dot variant="success"><Button …>Live status</Button></Badge>

Label pill (children only)

1242ok!

tsx
<Badge variant="primary">12</Badge>
<Badge variant="secondary">42</Badge>
<Badge variant="success">ok</Badge>
<Badge variant="danger">!</Badge>

Guidelines

✓

Use dot for "new" without a specific count.Counts that change rapidly are distracting; a dot is enough.

Stack two Badges on the same element.Two corners clash visually — combine the state instead.