Components
Badge
A compact, non-interactive status label. Types, colours, sizes, and demo sections are all driven from config/design-system.config.ts.
Contextual config
Badge sections
Show or hide documentation sections on this page. Changes apply immediately and persist across the site.
Component Playground
Live instance - the controls read their options from the same config that drives the Variants section below.
pill-color · brand · mdControls
Type
Style
Size
Colour
Label
Types
Two shapes: pill-color (fully rounded) and color (soft rounded rectangle).
Pill colour
Badge colour
Colours
Use gray for neutral status, brand for informational, and error/warning/success for outcome status.
All colours - pill-color
Sizes
Small / Medium / Large
With dot
A leading status dot - most common for live/active states. Figma defines filled, backgroundless, and square badge-colour dot styles.
Filled pill
No background
Square colour
With icon
Leading or trailing icon, passed as an @untitledui/icons component.
Icon leading / trailing
Icon only
No label
With dismiss button
An inline close button - used for removable filters and selected tags.
Dismissible
Badge group
A badge with an attached addon label - used to pair a metric with its context, e.g. a trend value next to a description.
Leading / trailing addon
API
| Prop | Type | Default |
|---|---|---|
type | "pill-color" | "color" | "modern" | "pill-color" |
size | "sm" | "md" | "lg" | "md" |
color | BadgeColors (12 options) | "gray" |
background | boolean (BadgeWithDot pill-color) | true |
children | ReactNode | - |
Token anatomy
Badge colours pull from a separate utility colour scale (distinct from the primitive Brand/Error/Warning/Success palette) - a wider set of 50/100/200/500/700 steps built for badges, tags, and avatars.
| Colour | Background | Text | Ring |
|---|---|---|---|
| gray | utility-neutral-50 | utility-neutral-700 | utility-neutral-200 |
| brand | utility-brand-50 | utility-brand-700 | utility-brand-200 |
| error | utility-red-50 | utility-red-700 | utility-red-200 |
| warning | utility-yellow-50 | utility-yellow-700 | utility-yellow-200 |
| success | utility-green-50 | utility-green-700 | utility-green-200 |
Usage
import { Badge } from "@/components/base/badges/badges";
<Badge type="pill-color" color="success">Active</Badge>Figma
Source: DS - Foundations / Badges. The documented set now includes the Figma backgroundless dot pill variation.