Badge

Status: Content below is sourced from the Naos Figma documentation page for Badge (file wK67Nv3wkKyQCFPK5RjyL8, node 5729:539, "🧩 Naos – Navigation Components", checked 2026-08-19) plus the component's TypeScript source. Anything not present in either source is left as an explicit TODO — nothing invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/Badge/types/Badge.types.ts (package @dtsl/react, exported as Badge)

Props (verbatim from source)

export type BadgeColor = 'grey' | 'red'
export type BadgeStyleVariant = 'filled' | 'outline' | 'borderless'

export interface AnchorOrigin {
	vertical?: string
	horizontal?: string
}

export interface BadgeProps {
	count?: number
	overflowCount?: number
	showZero?: boolean
	color?: BadgeColor
	styleVariant?: BadgeStyleVariant
	visible?: boolean
	className?: string
	badgeStyles?: React.CSSProperties
	children?: React.ReactNode
	anchorOrigin?: AnchorOrigin
	dataTestId?: string
	badgeContentStyles?: React.CSSProperties
}

Figma-to-code naming map (the Figma file uses different labels than the prop values — confirmed by cross-checking the Figma "Options" matrix against BadgeStyleVariant):

Figma label	styleVariant value
Plain	filled
Linear	outline
Ghost	borderless

Color axis in Figma is labeled "Grey" / "Red", matching color directly.

Anatomy

Per the Figma "Anatomy" section, Badge has 3 parts:

1. Container — the pill/circle shape
2. Number — the count value
3. "+" — appended when the count exceeds overflowCount

When to Use

Badge is used as a small count/overflow indicator anchored to another element. Confirmed real placement contexts, from the Figma "Placement" section:

• On a button — anchored to the corner of a button (e.g. an icon button)
• In expanded navigation — trailing edge of a nav item, at any nesting level
• In collapsed navigation — on the collapsed nav icon itself, and carried into the popover it opens (each nav item inside the popover keeps its own badge)
• In multi-level / mobile navigation — Level 1 and Level 2 nav items each carry independent badges

Observed pattern (not an explicit written rule, but consistent across every placement example in the Figma file): every navigation-item badge shown uses the Red color — none use Grey in the placement examples. Grey only appears in the standalone "Options" matrix. Confirm with design whether Red is mandatory for nav-count badges specifically, since this is inferred from example consistency, not a stated rule.

When NOT to Use

TODO — not covered in the Figma page read. Needs design/PM input on when a different indicator (e.g. Status, Tag) would be more appropriate than a numeric Badge.

CRITICAL: Real business rules (verbatim from the Figma "Usage" section)

ShowZero prop: Badge will be hidden when count is 0, but we can use showZero to show it.

OverflowCount: a + is displayed when count is larger than overflowCount. The default value of overflowCount is 99.

✅ Leave showZero unset (default) when a zero count should simply hide the badge ✅ Set showZero={true} only when a visible "0" is intentional ❌ Don't assume the badge is always visible — by default it disappears at count 0

Decision Logic

Is the count 0?
  Not showing showZero (default) → Badge is hidden
  showZero=true → Badge shows "0"

Is count > overflowCount (default 99)?
  YES → Badge shows "{overflowCount}+"
  NO  → Badge shows the exact count

color (grey/red) and styleVariant (filled/outline/borderless) selection: TODO — Figma shows all 6 combinations exist (see Options matrix) but doesn't state when to pick each. Needs design/PM input beyond the observed "nav badges are Red" pattern above.

Micro Animation

Real, from the Figma "Micro animation" section: the badge animates when its count value changes (two example frames titled "Number change animation" demonstrate a transition between values). Exact animation timing/easing not specified in the readable Figma content — needs a motion spec or Storybook check if that detail matters for the real doc.

Accessibility

TODO — no accessibility section exists on this Figma page. Needs UX/product input. Note: a numeric badge is likely visual-only and needs a text alternative for screen readers — a real concern to verify against the actual implementation, not assumed here.

Common Mistakes

• ❌ Assuming Badge is always visible regardless of count (it hides at 0 unless showZero is set)
• ❌ Hardcoding a + suffix instead of relying on overflowCount
• TODO — remaining items need UX/product input.