Data Display

Badge

Non-interactive status labels used to convey state, category, or metadata. Four variants (Outlined, Tonal, Filled, Ghost) × two sizes × six intents. Supports optional leading and trailing icons.

V 1.0View in Storybook
Controls
Variant
Size
Intent
Label
Leading icon
Trailing icon
Label

Variants

Outlined × All Intents
NeutralErrorSuccessWarningInfoBrand
Tonal × All Intents
NeutralErrorSuccessWarningInfoBrand
Filled × All Intents
NeutralErrorSuccessWarningInfoBrand
Ghost × All Intents
NeutralErrorSuccessWarningInfoBrand
All Variants × Intents Matrix
outlinedNeutralErrorSuccessWarningInfoBrand
tonalNeutralErrorSuccessWarningInfoBrand
filledNeutralErrorSuccessWarningInfoBrand
ghostNeutralErrorSuccessWarningInfoBrand
Small vs Medium
SmallMedium
With Leading Icon
NeutralErrorSuccessWarningInfoBrand
With Trailing Icon
NeutralErrorSuccessWarningInfoBrand

Props

Name
Type
Default
variant
'outlined' | 'tonal' | 'filled' | 'ghost'
'tonal'
size
'sm' | 'md'
'sm'
intent
'neutral' | 'error' | 'success' | 'warning' | 'info' | 'brand'
'neutral'
leadingIcon
ReactNode
undefined
trailingIcon
ReactNode
undefined
children
ReactNode
—

Code

import { Badge } from '@/src/components/Badge/Badge'

// Tonal (default)
<Badge variant="tonal" intent="brand">Brand</Badge>
<Badge variant="tonal" intent="success">Success</Badge>

// Outlined
<Badge variant="outlined" intent="error">Error</Badge>

// Filled
<Badge variant="filled" intent="warning">Warning</Badge>

// Ghost
<Badge variant="ghost" intent="info">Info</Badge>

// With icons
<Badge variant="tonal" intent="success" leadingIcon={<CheckIcon />}>Active</Badge>
<Badge variant="outlined" intent="neutral" trailingIcon={<ChevronIcon />}>Filter</Badge>

// Medium size
<Badge variant="tonal" intent="brand" size="md">Medium</Badge>

Usage guidelines

When to use
  • Use to surface status, category, or metadata inline with content.
  • Use tonal or filled variants for high-visibility status indicators.
  • Use tone semantically — success for completed, warning for pending, error for failed.
When not to use
  • Don't write long text inside a badge — keep it to 1–3 words maximum.
  • Avoid using a badge as a button or interactive element.
  • Don't mix multiple badge tones on a single row item without a clear reason.