StacklyUI
Components/Badge

Badge

A small pill for statuses, counts, and labels.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
render(
  <div className="flex flex-wrap items-center justify-center gap-2">
    <Badge>Soft</Badge>
    <Badge variant="solid">Solid</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="destructive">Error</Badge>
  </div>
)
02

Examples

Common variations — edit any of them live.

With a dot

playground.tsx
render(
  <div className="flex gap-2">
    <Badge variant="success"><span className="h-1.5 w-1.5 rounded-full bg-current" />Live</Badge>
    <Badge variant="warning"><span className="h-1.5 w-1.5 rounded-full bg-current" />Beta</Badge>
    <Badge variant="soft"><span className="h-1.5 w-1.5 rounded-full bg-current" />New</Badge>
  </div>
)

On a button

playground.tsx
render(
  <Button variant="outline">
    Inbox
    <Badge variant="solid" className="ml-1">4</Badge>
  </Button>
)
03

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/badge

Or install the package and import it:

$pnpm add @stacklyui/ui motion
04

Usage

Import Badge from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.