Glin UI
Radix UIBase UI
Primitive / Atom

Badge

Compact status indicator for labels, states, and counts.

Edit on GitHub
Add CSV export to reports

#482 opened by Priya Nair

Open
Fix timezone drift in schedules

#479 opened by Diego Alvarez

In review
Upgrade to Node 22

#471 opened by Hana Sato

Merged

Installation

Install from
pnpm dlx @glinui/cli@latest add badge

Prefer the package?

Usage

Variants

Every vocabulary variant on the default tone. Omit variant to follow the ambient design style.

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



export function BadgeVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="glinr">glinr</Badge>
      <Badge variant="solid">solid</Badge>
      <Badge variant="plain">plain</Badge>
      <Badge variant="soft">soft</Badge>
      <Badge variant="outline">outline</Badge>
      <Badge variant="ghost">ghost</Badge>
      <Badge variant="gradient">gradient</Badge>
    </div>
  )
}

Sizes, dots and icons

Sizes, status dots and leading icons.

SmallMediumLargeNewBlocked
LivePendingFailedVerifiedPrivate
import { Lock, ShieldCheck } from "@phosphor-icons/react"
import { Badge } from "@glinui/ui"



export function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-5">
      <div className="flex flex-wrap items-center gap-2">
        <Badge size="sm">Small</Badge>
        <Badge size="md">Medium</Badge>
        <Badge size="lg">Large</Badge>
        <Badge tone="accent" variant="solid">New</Badge>
        <Badge tone="danger" variant="outline">Blocked</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Badge variant="soft" tone="success" dot>Live</Badge>
        <Badge variant="soft" tone="warning" dot dotTone="accent">Pending</Badge>
        <Badge variant="soft" tone="danger" dot dotTone="live">Failed</Badge>
        <Badge variant="soft" tone="info">
          <ShieldCheck aria-hidden className="mr-1 size-3.5" />
          Verified
        </Badge>
        <Badge variant="outline">
          <Lock aria-hidden className="mr-1 size-3.5" />
          Private
        </Badge>
      </div>
    </div>
  )
}

Variants

import { Badge } from "@glinui/ui"

export function BadgeVariantDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="glass">Glass</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  )
}

Sizes

import { Badge } from "@glinui/ui"

export function BadgeSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  )
}

Raised badge with status dot

raised uses the lift ring. dot adds a glowing status dot, asChild renders a link.

import { Badge } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="raised" dot dotTone="ok">All systems normal</Badge>
      <Badge variant="raised" dot dotTone="live" asChild>
        <a href="/changelog">What is new</a>
      </Badge>
    </div>
  )
}

Accessibility

  • Renders as `<span>` -- decorative by default.
  • Add `role="status"` if badge conveys live state.
  • Use badge text that remains understandable out of context.
  • Do not rely on color-only meaning.

ARIA Attributes

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

Reduced Motion

No animation dependencies.

Badge is static and motion-independent.

API Reference

PropTypeRequiredDefaultDescription
variantSurfaceVariant | ExtraVariant | "default" | "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "raised" | "frosted"Noambient (glinr)Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass).
toneSurfaceToneNoneutralColour tone for the vocabulary variants.
size"sm" | "md" | "lg"NomdHeight scale (h-5/h-6/h-7).
asChildbooleanNofalseRender the child element (for example an anchor) with badge styling.
dotbooleanNofalseShow a glowing status dot before the content.
dotToneBadgeDotToneNo"ok"Dot color.

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

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

BadgeProps

BadgeProps

PropTypeRequiredDefaultDescription
asChildbooleanNofalseRender the child element (for example an anchor) with badge styling.
dotbooleanNofalseShow a glowing status dot before the content.
dotToneBadgeDotToneNo"ok"Dot color.
size"sm" | "md" | "lg"No--
toneSurfaceToneNo-Colour tone for the vocabulary variants.
variantSurfaceVariant | ExtraVariant | "default" | "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "raised" | "frosted"No-Visual variant. Omit for the ambient design style (glinr by default). Vocabulary: glinr, solid, plain, soft, outline, ghost, gradient, glass. Legacy names (default, primary, secondary, destructive, success, warning, info, raised, frosted) still work; liquid, matte and glow stay badge-specific.