Component

Badge

Label counts, statuses, and categories with compact size and variant controls.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Badge } from "@chitrank2050/monoline-ui/badge"

Basic usage

<Badge variant="outline" size="sm">Outline</Badge>
<Badge variant="solid" size="sm">Solid</Badge>
<Badge variant="muted" size="sm">Muted</Badge>
<Badge variant="accent" size="sm">Accent</Badge>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Badge is for short, static labels such as a category, version, or compact count.

Avoid when

The label is selectable, changes live, or contains enough text to wrap.

Accessibility

Badge is a span with no announcement role. Its text must make sense on its own, and live changes need a separate status mechanism.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantoutline | solid | muted | accentVisual intent variation

sizexs | sm | mdScale variation

asChildbooleanRadix slot composition support

Design tokens

Theme variables this component reads for color, spacing, and motion.

--radius-pillCSS varFully rounded outline pill shape

Implementation

The source used by the example above, including any state it needs.

import { Badge } from "@chitrank2050/monoline-ui/badge"

export function Badges() {
  return (
    <div className="flex gap-2">
      <Badge variant="solid">Active</Badge>
      <Badge variant="outline">Draft</Badge>
      <Badge variant="muted">Archived</Badge>
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentStatusComponent · ReferenceReference→02ComponentTagComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview