Primitive / Atomstable

Badge

Compact status indicator for labels, states, and counts.

@glinui/uiComponent: badge

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add badge

Usage$

Status

TSX

1import { Badge } from "@glinui/ui"
2
3export function BadgeBasicDemo() {
4return <Badge>Status</Badge>
5}

Examples$

Variants$

DefaultGlassOutlineGhost

TSX

1import { Badge } from "@glinui/ui"
2
3export function BadgeVariantDemo() {
4return (
5  <div className="flex flex-wrap gap-2">
6    <Badge>Default</Badge>
7    <Badge variant="glass">Glass</Badge>
8    <Badge variant="outline">Outline</Badge>
9    <Badge variant="ghost">Ghost</Badge>
10  </div>
11)
12}

Sizes$

SmallMediumLarge

TSX

1import { Badge } from "@glinui/ui"
2
3export function BadgeSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-2">
6    <Badge size="sm">Small</Badge>
7    <Badge size="md">Medium</Badge>
8    <Badge size="lg">Large</Badge>
9  </div>
10)
11}

Accessibility$

Use badge text that remains understandable out of context.
Do not rely on color-only meaning.

Reduced Motion$

Badge is static and motion-independent.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from badgeVariants.
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost" \| "success" \| "warning" \| "destructive" \| "info"`	No	`"default"`	Variant option from badgeVariants.

Source$

TSX

1import { Badge } from "@glinui/ui"

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/badge.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

BadgeProps

`BadgeProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from badgeVariants.
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost" \| "success" \| "warning" \| "destructive" \| "info"`	No	`"default"`	Variant option from badgeVariants.