Badge

stable

Colored label for status, trust level, or category

import { Badge } from "@nodus/design-system"

AgencyTemporalValidationBlackGray

AgencyTemporalValidation

Loading demo…

Props

Prop	Type	Default	Description
`color`	`"agency" \| "temporal" \| "validation" \| "black" \| "gray"`	"black"	Semantic color
`outlined`	`boolean`	false	Outlined style when true

color

Type "agency" | "temporal" | "validation" | "black" | "gray"Default "black"

Semantic color

outlined

Type booleanDefault false

Outlined style when true

Renders as a <span> — purely presentational. Does not receive keyboard focus.
For dynamic status badges (e.g. agent state changing), wrap the container in aria-live="polite" so screen readers announce updates.
Badge text should be meaningful without color — color reinforces meaning but must not be the sole differentiator.
Accepts all HTMLAttributes<HTMLSpanElement> including role and aria-label for custom semantics.

Metadataagencytemporalvalidationblackgraysemantic type border

MobileWorks As-Is

Design Rationale

This component was designed to express:

Uppercase label chip with optional click handler

Inline data value with expandable provenance popover

Colored dot indicating idle, active, pending, error, or completed state

AI model identifier chip

Was this helpful?