Skip to main content

​
Installation

npx @soft-ui/cli add badge

​
Usage

import { Badge } from '@soft-ui/react/badge'

export default function Example() {
  return <Badge variant="success">Active</Badge>
}

​
Examples

​
Variants

Badges support semantic and decorative color variants. 
// Semantic variants
<Badge variant="neutral">Neutral</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>

// Decorative variants
<Badge variant="blue">Blue</Badge>
<Badge variant="purple">Purple</Badge>
<Badge variant="pink">Pink</Badge>

​
Sizes

Three sizes available: xs, s (default), and m. 
<Badge size="xs">Extra Small</Badge>
<Badge size="s">Small</Badge>
<Badge size="m">Medium</Badge>

​
Emphasized

Use isEmphasized for higher contrast with background color and border. 
<Badge isEmphasized variant="info">Emphasized</Badge>
<Badge variant="info">Default</Badge>

​
With Icons

Add leading or trailing icons. Icons only appear on s and m sizes. 
import { RiCheckLine, RiCloseLine } from '@soft-ui/icons'

<Badge leadingIcon={<RiCheckLine />}>Verified</Badge>
<Badge trailingIcon={<RiCloseLine />}>Dismissible</Badge>

​
With Dots

Use dots as decorative indicators. Dots are hidden if icons are present. 
<Badge leadingDot variant="success">Active</Badge>
<Badge trailingDot variant="warning">Pending</Badge>

​
API Reference

​
Badge

​
variant
string
default:"neutral"
Color variant. Semantic: neutral, info, warning, danger, success. Decorative: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
​
size
string
default:"s"
Size of the badge: xs, s, m.
​
isEmphasized
boolean
default:false
When true, applies background color and border for higher contrast.
​
leadingIcon
ReactNode
Icon element to display before the label. Only shown on s and m sizes.
​
trailingIcon
ReactNode
Icon element to display after the label. Only shown on s and m sizes.
​
leadingDot
boolean
default:false
Show decorative dot before the label. Hidden if leadingIcon is present.
​
trailingDot
boolean
default:false
Show decorative dot after the label. Hidden if trailingIcon is present.
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides. Use with caution.
​
children
ReactNode
Badge label content.

​
Accessibility

  • When a badge contains only an icon or dot without text, provide an aria-label on the parent element
  • Decorative adornments (icons, dots) are automatically hidden from screen readers when a label is present

​
Design Tokens

Badge uses design tokens for consistent styling:
  • Spacing: --space-* for padding and gaps
  • Border radius: --radius-max for pill shape
  • Colors: --color-actions-*, --color-content-*, --color-surface-*, --color-border-*
  • Typography: --font-size-*, --line-height-*, --font-weight-medium

Build docs developers (and LLMs) love

Get started for freeTalk to us