Primitive / Atomstable

Badge

Compact status indicator for labels, states, and counts.

@glinui/uiComponent: badge

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add badge

Usage

Glass Variants

DefaultGlassLiquidMatteGlow

TSX

1import { Badge } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap gap-2">
6      <Badge>Default</Badge>
7      <Badge variant="glass">Glass</Badge>
8      <Badge variant="liquid">Liquid</Badge>
9      <Badge variant="matte">Matte</Badge>
10      <Badge variant="glow">Glow</Badge>
11    </div>
12  )
13}

Semantic Variants

SuccessWarningErrorInfo

TSX

1import { Badge } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap gap-2">
6      <Badge variant="success">Success</Badge>
7      <Badge variant="warning">Warning</Badge>
8      <Badge variant="destructive">Error</Badge>
9      <Badge variant="info">Info</Badge>
10    </div>
11  )
12}

Minimal & Sizes

OutlineGhostSmallMediumLarge

TSX

1import { Badge } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap items-end gap-2">
6      <Badge variant="outline">Outline</Badge>
7      <Badge variant="ghost">Ghost</Badge>
8      <Badge size="sm">Small</Badge>
9      <Badge size="md">Medium</Badge>
10      <Badge size="lg">Large</Badge>
11    </div>
12  )
13}

Accessibility

Renders as `<span>` -- decorative by default.
Add `role="status"` if badge conveys live state.

ARIA Attributes

Decorative by default
Add `role="status"` for live state badges

Reduced Motion

No animation dependencies.

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "liquid" \| "matte" \| "glow" \| "outline" \| "ghost" \| "success" \| "warning" \| "destructive" \| "info"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Height scale (h-5/h-6/h-7).

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Badge } from "@glinui/ui"

Source Files

badge.tsx

badge.test.tsxtest

Dependencies

@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.