Badge

A small circular indicator used to draw attention to specific UI elements. Common uses include notification counts, status indicators, and visual markers.

Props

Prop	Type	Default	Description
size	Size	"medium"	Badge size: "xsmall" (4px), "small" (6px), "medium" (12px), "large" (18px), "xlarge" (24px)
color	Color	"highlight"	Background color from theme

Sizes

xsmall

small

medium

large

xlarge

<Badge size="xsmall" />  // 4px
<Badge size="small" />   // 6px
<Badge size="medium" />  // 12px (default)
<Badge size="large" />   // 18px
<Badge size="xlarge" />  // 24px

Colors

highlight

negative

warning

divider

<Badge color="highlight" />  // Accent/brand color
<Badge color="negative" />   // Error/alert
<Badge color="warning" />    // Warning
<Badge color="divider" />    // Neutral/muted

Common use cases

Notification indicator

Unread notifications

<Row jss={{ position: "relative" }}>
  <IconButton bare icon="bell" color="secondary" onClick={() => {}} />
  <Badge
    size="small"
    color="negative"
    jss={{ position: "absolute", top: 0, right: 0 }}
  />
</Row>

Status indicator

Online

Away

Offline

<Row gap="small" align="center">
  <Badge size="small" color="highlight" />
  <Span>Online</Span>
</Row>

Visual markers

Use badges to highlight new or important items:

New feature

<Row gap="small" align="center">
  <Span>New feature</Span>
  <Badge size="xsmall" color="highlight" />
</Row>