Design System

Badge

Small status label used to highlight categories, states, or metadata. Supports multiple intents and optional icons.

Playground

Intent

Five color intents to convey different semantic meanings.

Size

Medium (default) and small for compact contexts.

Icons

Optional left and/or right icons. Defaults to the intent's standard icon when set to true.

When to Use

Best for

  • Indicating status or category of an item (success, warning, error)
  • Labeling metadata alongside other content (tags, types, severity)
  • Drawing attention to key information without interrupting flow

Consider alternatives when

  • The information requires user action — use a banner or alert instead
  • The label is interactive (clickable/dismissable) — use a chip or tag component

Props

PropTypeRequiredDescription
label string Yes Text content of the badge
intent "brand" | "neutral" | "critical" | "warning" | "info" No Color scheme (default: "brand")
size "medium" | "small" No Size variant (default: "medium")
iconLeft boolean | ReactNode No Left icon — true for default intent icon, or a custom element
iconRight boolean | ReactNode No Right icon — true for default intent icon, or a custom element

Import

import { Badge } from '@/components/suite/desktop/Badge';

Design Tokens

PurposeToken
Background (brand)var(--v1-color-bg-primary-subtle-on-elevation-0)
Background (neutral)var(--v1-color-bg-tertiary-default-on-elevation-0)
Background (critical)var(--v1-color-bg-alert-red-subtle-on-elevation-0)
Background (warning)var(--v1-color-bg-alert-yellow-subtle-on-elevation-0)
Background (info)var(--v1-color-bg-alert-blue-subtle-on-elevation-0)
Text (brand)var(--v1-color-text-primary-default)
Text (neutral)var(--v1-color-text-subdued)
Text (critical)var(--v1-color-text-alert-red)
Text (warning)var(--v1-color-text-alert-yellow)
Text (info)var(--v1-color-text-alert-blue)
Border radiusvar(--primitive-radius-full)
Horizontal paddingvar(--primitive-spacing-8)
Gapvar(--primitive-spacing-4)
Page tokens