BADGE

Source: design-system/components/Badge/Badge.tsx. React Server Component, zero client JavaScript.

Props

Prop	Type	Default	Required
Prop`variant`	Type`'default' \| 'dot'`	Default`'default'`	Requiredno
Prop`size`	Type`'sm' \| 'md'`	Default`'md'`	Requiredno
Prop`children`	Type`ReactNode`	Defaultnone	Requiredyes

Other <span> attributes (id, aria-*, data-*) pass through, and className is appended to the component's own classes.

OPEN_TO_WORKAVAILABLESMALL

SOURCE

<Badge variant="dot">OPEN_TO_WORK</Badge>
  <Badge variant="default">AVAILABLE</Badge>
  <Badge size="sm">SMALL</Badge>

Below 360px the badge wraps (white-space: normal, flex-wrap: wrap) instead of overflowing.

The dot is aria-hidden; the label text carries the meaning. The pulse animation stops when the motion switch is off.