FEEDBACK

Chip

Pill-shaped tag with optional status dot and active state. Use chips for filters, tags, and soft status labels. For uppercase Memphis-shadowed badges (status / outcome), reach for Badge.

Import

import { Chip } from 'damo-ui'

Variants

DefaultAccentBrandSuccessWarningDanger
1<Chip>Default</Chip>
2<Chip variant="accent">Accent</Chip>
3<Chip variant="brand">Brand</Chip>
4<Chip variant="success">Success</Chip>
5<Chip variant="warning">Warning</Chip>
6<Chip variant="danger">Danger</Chip>

Sizes

SmallMediumLarge
1<Chip size="sm">Small</Chip>
2<Chip size="md">Medium</Chip>
3<Chip size="lg">Large</Chip>

Status dot + active

ActiveOfflineSelected
1<Chip dotColor="var(--success)">Active</Chip>
2<Chip dotColor="var(--destructive)">Offline</Chip>
3<Chip active dotColor="var(--primary)">Selected</Chip>

Props

Chip props
PropTypeDefaultDescription
variant'default' | 'accent' | 'brand' | 'success' | 'warning' | 'danger''default'Background tint and border color. All variants share the rounded pill shape.
size'sm' | 'md' | 'lg''md'Padding + text size step.
dotColorstring—When set, prepends an 8×8 dot before children. Accepts any CSS color string (var(--success), #16a34a, etc.).
activeboolean—Swap the surface to the primary token (selected look). With dotColor the dot border flips to white for contrast.
childrenReactNode—Chip label — supports text or icon + text.

Accessibility

  • Chip renders a <span> — when used inside a clickable filter, wrap it in a <button> with aria-pressed reflecting the active state.
  • The status dot is purely decorative; the label text must convey the same status (do not rely on color alone).
← BadgeHint →