BadgeNew

A compact status label with solid, muted, and dot variants for tagging content inline.

Dependencies

class-variance-authority

Interaction Type

Static label by default; supports a shimmer wave on solid badges, a pulsing status dot, dismissible chips, and click interactivity.

Props

Options you can pass to customize this component.

Prop

Type

Description

variant

"solid" | "muted" | "dot"

Visual style. Defaults to "solid".

size

"sm" | "md" | "lg"

Badge size. Defaults to "md".

icon

ReactNode

Leading decorative icon (solid/muted variants).

shimmer

boolean

Solid variant only: a soft light wave sweeps across the badge (default: true). Disabled under reduced motion.

pulse

boolean

Dot variant only: softly pulses the status dot (default: false). Disabled under reduced motion.

onDismiss

(event) => void

Renders a trailing remove button and calls back on activation.

dismissLabel

string

Accessible label for the remove button (default: "Remove").

asChild

boolean

Merge badge styling onto the child element (Slot pattern).

className

string

Additional CSS classes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/badge.json

How to use

import { Badge } from "@/components/ui/badge"

export function Demo() {
  return (
    <div className="flex items-center gap-2">
      <Badge>New</Badge>
      <Badge variant="muted">Beta</Badge>
      <Badge variant="dot" pulse>Live</Badge>
      <Badge variant="muted" onDismiss={() => console.log("removed")}>
        Filter
      </Badge>
    </div>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

This update isEarly Accessand ready to ship.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/badge.json