Skip to main content

Badge

3 min readStableBeginner

A badge is a short inline label: a version number, a lifecycle stage, a single status word. Badge renders text on a colored background. BadgeLink swaps that text for a linked image, and BadgeGroup lays a row of them out side by side.

Quick Start

Left alone, a badge renders gray at md size.

Default
quick-start.mdx
MDX
<Badge>Default</Badge>

Adding Options

variant picks the color from default, info, success, warning, and danger. size takes md (12px text, the default) or sm (10px text with tighter padding) for dense rows.

Default v2.1 New Beta Deprecated

The same five colors at size="sm", laid out in a row by BadgeGroup:

Default

v2.1

New

Beta

Deprecated

Small badges sit inline: Beta.

variants.mdx
MDX
<Badge>Default</Badge> <Badge variant="info">v2.1</Badge>
<Badge variant="success">New</Badge> <Badge variant="warning">Beta</Badge>
<Badge variant="danger">Deprecated</Badge>
 
The same five colors at `size="sm"`, laid out in a row by `BadgeGroup`:
 
<BadgeGroup>
  <Badge size="sm">Default</Badge>
  <Badge variant="info" size="sm">
    v2.1
  </Badge>
  <Badge variant="success" size="sm">
    New
  </Badge>
  <Badge variant="warning" size="sm">
    Beta
  </Badge>
  <Badge variant="danger" size="sm">
    Deprecated
  </Badge>
</BadgeGroup>
 
Small badges sit inline: <Badge variant="warning" size="sm">Beta</Badge>.

Advanced

children takes any node, not just a string, so a badge can wrap an emoji or a short code span. For shields and deploy buttons, BadgeLink renders an image 40px tall inside a link that opens in a new tab, and BadgeGroup wraps a row of them with 12px gaps and lets the row wrap onto a second line.

v2.1.0
rich-badge.mdx
MDX
<Badge variant="info">
  <code>v2.1.0</code>
</Badge>
MIT licenseNode.js 20.9.0 or newer
project-badges.mdx
MDX
<BadgeGroup>
  <BadgeLink
    src="https://img.shields.io/badge/license-MIT-blue.svg"
    alt="MIT license"
    href="https://opensource.org/licenses/MIT"
  />
  <BadgeLink
    src="https://img.shields.io/badge/node-%3E%3D20.9.0-brightgreen.svg"
    alt="Node.js 20.9.0 or newer"
    href="https://nodejs.org"
  />
</BadgeGroup>

Options

Badge

childrenReactNoderequired

The label. One or two words reads best, and any inline node works.

variant'default' | 'info' | 'success' | 'warning' | 'danger'Default: default

Color of the badge. See the five values below.

size'sm' | 'md'Default: md

Text size and padding. See the two values below.

Badge variants

defaultvariant

Gray pill, gray text. Neutral labels with no status meaning.

infovariant

Sky-blue pill. Version numbers and other neutral facts.

successvariant

Teal pill. Shipped, stable, or passing.

warningvariant

Amber pill. Beta, experimental, or needs attention.

dangervariant

Red pill. Deprecated, removed, or breaking.

Every variant has its own dark-mode pair, so the pill stays readable in both themes. There is no fallback: a variant outside the five above leaves the pill with no color classes, so it renders as bare text.

Badge sizes

Same rule as variant: a size outside the two below leaves the pill with no text-size or padding classes.

mdsize

12px text with px-2 py-0.5 padding. The default, and the right pick for standalone badges.

smsize

10px text with px-1.5 py-0.5 padding. Use it inside a sentence or a dense table-like row.

srcstringrequired

Image URL for the badge graphic. The image renders 40px tall.

hrefstringrequired

Link target. It opens in a new tab with rel="noopener noreferrer".

altstringDefault: empty string

Alt text for the image.

BadgeGroup

childrenReactNoderequired

The elements to lay out, usually BadgeLink images. They sit in a flex row with 12px gaps, center-aligned, and wrap onto a second line when the row runs out of width.

Related pages

Cards

Changelog

Was this page helpful?