Badge ​

A small label used to highlight status, counts, or metadata associated with an element.

Variants ​

Solid
Subtle
Outline
Ghost

Themes ​

Solid
Subtle
Outline
Ghost

API Reference ​

Show types
typescript
interface Label {
  toString(): string
}

export interface BadgeProps {
  /** Visual color theme of the badge */
  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'

  /** Controls the size of the badge */
  size?: 'sm' | 'md' | 'lg'

  /** Visual style of the badge */
  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'

  /** Content displayed inside the badge */
  label?: Label | string | number
}
Prop Default Type
theme
"gray"
"blue" | "red" | "green" | "gray" | "orange"

Visual color theme of the badge

size
"md"
"md" | "sm" | "lg"

Controls the size of the badge

variant
"subtle"
"subtle" | "outline" | "solid" | "ghost"

Visual style of the badge

label
—
string | number | Label

Content displayed inside the badge

Slot Payload
prefix
—

Content shown before the badge label

default
—

Main badge content (overrides `label` prop)

suffix
—

Content shown after the badge label

AvatarBreadcrumbs