Badge

V 1.0View in Storybook

Pill-shaped badge with 5 tones × 2 styles (light/heavy), optional leading icon or number bubble.

Playground

Tone

Style

Children

Leading Icon

Leading Icon Type

Enable Number Badge

Number Badge

Trailing Icon

Trailing Icon Type

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-badge--playground&viewMode=story&args=tone%3Adefault%3Bstyle%3Alight%3Bchildren%3ABadge+Text%3BleadingIcon%3A%21true%3BleadingIconType%3Awarning%3BenableNumberBadge%3A%21false%3BnumberBadge%3A2%3BtrailingIcon%3A%21true%3BtrailingIconType%3Across

Code

<Badge
  tone="default"
  style="light"
  leadingIcon
  leadingIconType="warning"
  enableNumberBadge={false}
  numberBadge={2}
  trailingIcon
  trailingIconType="cross"
>
  Badge Text
</Badge>

Props

Name	Type	Default
`tone`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`
`style`	`'light' \| 'heavy'`	`'light'`
`children`	`string`	`'Badge Text'`
`leadingIcon`	`boolean`	`true`
`leadingIconType`	`'warning' \| 'dot' \| 'star'`	`'warning'`
`enableNumberBadge`	`boolean`	`false`
`numberBadge`	`number`	`2`
`trailingIcon`	`boolean`	`true`
`trailingIconType`	`'cross' \| 'down'`	`'cross'`

Usage guidelines

When to use

Use light style for labels embedded in content; heavy style for high-visibility status indicators.
Use tone semantically — success for completed, warning for pending, error for failed states.
Number badges work best for unread counts and notification indicators.

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.