Skip to content
GetUrUI

Animated Badge

.md

Small uppercase status label in nine tones, with an optional pulsing dot for live states and a lock glyph on Pro.

badgelabelstatustagpillpulse

Installation

$npx shadcn@latest add @geturui/badge
Download source (.zip)

Usage

usage.tsx
1import { Badge } from "@/components/ui/badge";
2
3export function Statuses() {
4  return (
5    <div className="flex gap-2">
6      <Badge tone="new" pulse>New</Badge>
7      <Badge tone="pro">Pro</Badge>
8      <Badge tone="success">Live</Badge>
9      <Badge tone="count">214</Badge>
10    </div>
11  );
12}

Props

PropTypeDefaultDescription
tone"neutral" | "new" | "free" | "pro" | "updated" | "beta" | "count" | "success" | "danger""neutral"Colour and style. pro adds a lock icon; count uses mono numerals.
pulsebooleanfalseAdds a pulsing dot before the label for live or new states.
iconReactNode—Leading icon; overrides the automatic Pro lock.
...propsHTMLAttributes<HTMLSpanElement>—Any span attribute.

Accessibility

  • Status is always carried by the text, never colour alone.
  • The pulse dot and Pro lock are aria-hidden.
  • The pulse is a CSS animation that settles under prefers-reduced-motion.

Related

AlertAvatarFieldSpinner