Badge

Status coloursCopy Anchor Link

color sets the muted status colour. white is the default. pending and rejected sit beside the usual status roles.

<Badge>Draft</Badge>
<Badge color="grey">Archived</Badge>
<Badge color="brand">Featured</Badge>
<Badge color="information">In review</Badge>
<Badge color="success">Active</Badge>
<Badge color="warning">Due soon</Badge>
<Badge color="error">Overdue</Badge>
<Badge color="pending">Pending</Badge>
<Badge color="rejected">Rejected</Badge>

Utility huesCopy Anchor Link

Fifteen muted hues tag subjects, categories and labels. Do not use them for status. They space the slots 4px apart instead of 2px.

<Badge color="teal">Science</Badge>
<Badge color="indigo">Mathematics</Badge>
<Badge color="amber">History</Badge>
<Badge color="pink">Art</Badge>
<Badge color="deep-purple">Music</Badge>
<Badge color="light-green">Biology</Badge>
<Badge color="blue-grey">Elective</Badge>

SolidCopy Anchor Link

variant="solid" gives a high-emphasis badge in one of seven status colours. brand is its default. TypeScript rejects a utility hue on a solid badge.

<Badge variant="solid">New</Badge>
<Badge variant="solid" color="information">
  Live
</Badge>
<Badge variant="solid" color="success">
  Passed
</Badge>
<Badge variant="solid" color="warning">
  At risk
</Badge>
<Badge variant="solid" color="error">
  Failed
</Badge>

Sizes and shapeCopy Anchor Link

Four sizes, 24, 28, 32 and 36px high. medium is the default. Every size uses the same 16px label style, so only the height and padding change. type="pill" rounds the corners fully.

<Badge size="small" color="brand">
  Small
</Badge>
<Badge size="medium" color="brand">
  Medium
</Badge>
<Badge size="large" color="brand">
  Large
</Badge>
<Badge size="xlarge" color="brand">
  Extra large
</Badge>
<Badge size="large" color="brand" type="pill">
  Pill
</Badge>

SlotsCopy Anchor Link

leadingIcon and trailingIcon render in 16px slots. A single element becomes the slot itself and its own className wins. A function receives the slot props and the Badge state, and must spread the props onto the element it returns.

BadgeDot is the default slot content, an 8px dot in a 16px box that takes the text colour.

<Badge color="success" leadingIcon={<BadgeDot />}>
  Online
</Badge>
<Badge
  color="information"
  leadingIcon={<IconInterfaceEssentialDoneCheck aria-hidden />}
>
  Submitted
</Badge>
<Badge
  color="pending"
  size="large"
  trailingIcon={(props, state) => (
    <span {...props} aria-hidden>
      {state.size === 'large' ? '›' : '>'}
    </span>
  )}
>
  Next lesson
</Badge>

Icon onlyCopy Anchor Link

iconOnly renders a square badge with no label. A leadingIcon replaces the children. Without one, the children render in the icon slot. The trailing slot and the notification dot are hidden.

<Badge
  iconOnly
  color="success"
  aria-label="Verified"
  leadingIcon={<IconInterfaceEssentialDoneCheck />}
/>
<Badge iconOnly variant="solid" aria-label="New">
  <BadgeDot />
</Badge>

LoadingCopy Anchor Link

loading shows the skeleton fill and keeps the content in the DOM at opacity 0, so the badge keeps its loaded width. It sets aria-busy.

<Badge loading>Active</Badge>
<Badge loading size="large" leadingIcon={<BadgeDot />}>
  In review
</Badge>

Notification dotCopy Anchor Link

showNotificationDot puts a dot before the label in its own wrapper. customNotificationDot replaces the dot and dotWrapperClassName styles the wrapper.

<Badge color="error" showNotificationDot>
  3 new
</Badge>
<Badge
  color="brand"
  showNotificationDot
  customNotificationDot={<span aria-hidden>★</span>}
>
  Featured
</Badge>

CompositionCopy Anchor Link

render swaps the span for another element and keeps the Badge classes. className merges last. Labels longer than 280px end in an ellipsis.

<Badge color="information" render={<a href="#render" />}>
  View report
</Badge>

AccessibilityCopy Anchor Link

• The Badge is a plain span with no role. Put the meaning in the label, not only in the colour.
• An icon-only Badge has no visible label. Give it an aria-label, or hide it with aria-hidden when nearby text says the same.
• BadgeDot and the default notification dot are aria-hidden.
• loading sets aria-busy and keeps the content in the DOM.

APICopy Anchor Link

BadgeCopy Anchor Link

BadgeDotCopy Anchor Link

BadgeDot takes the attributes of an svg. className merges last with cn().