build69
Sign inGet API key
build69  /  Components  /  Data Display  /  Badge

Badge

v1.0.1Updated 20 Jul 2026

Small pill-shaped label for status, counts, or tags — covering BOTH the MUI Chip role (standalone pill in the full tone × emphasis matrix with leading dot / icon / avatar slots, dismiss button, count + pulse modes) AND t

View source← Back to catalog

Preview

Live · 23 stories
DefaultOpen ↗
▸Why this is recommendedlabeltagstatuspill+7

The default, out-of-the-box Badge.

Recommended for+14
  • ✓Status tags (PAID, OVERDUE, DRAFT)
  • ✓Counters
  • ✓Filter chips
  • ✓Filter chips with dismiss
  • ✓Live presence indicators
  • ✓Notification count on an avatar / icon button
  • ✓Unread / online dot on a child
Tags+6
labeltagstatuspillchipcountpulseanchoroverlaynotificationdefault
Features+4
  • Tones (neutral / primary / success / warning / danger / info)
  • Tiny, inline-friendly
  • Tone × emphasis matrix (neutral / primary / success / warning / danger / info × solid / soft / outline / ghost / link)
  • Leading dot / icon / avatar slot
  • Dismiss (x) button
  • Count badge variant
  • Pulse animation for "live" status
  • Anchored overlay mode (overlay count / dot on a child's corner)
  • anchorOrigin: 4 corners (top/bottom × left/right)
  • overlap: rectangular / circular (offsets for round vs square children)
  • showZero + invisible toggles for the overlay
Not recommended for−2
  • ✕Long labels (use Alert)
  • ✕Interactive controls (use Button)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Badge" })

Usage

import { Badge } from '@/components/primitives/badge';

<Badge tone="success" fill="soft" leading="dot" pulse>Live</Badge>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
emphasis

Visual emphasis (how loud)

'solid' | 'soft' | 'outline' | 'ghost' | 'link'—
tone

Semantic tone (what it means)

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
leading

Leading slot

'dot' | 'icon' | 'avatar' | ReactNode—
dismissable

Show dismiss button

boolean—
pulse

Pulse animation

boolean—
count

Numeric count (standalone or anchored)

number—
countCap

Max count before showing N+

number—
dot

Render as a dot instead of a count

boolean—
anchor

Child to overlay the badge on; switches to anchored mode

ReactNode—
anchorOrigin

Which corner of the child to anchor to

{ vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' }—
overlap

Offset preset for square vs round children

'rectangular' | 'circular'—
showZero

Show the overlay even when count is 0

boolean—
invisible

Hide the anchored overlay

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files