50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1b7a,"use client"; import { AlertTriangle, Check, Circle, Info, LoaderCircle, X, type LucideIcon, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type HTMLMotionProps, type Variants, } from "motion/react"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; export type StatusBadgeStatus = | "neutral" | "info" | "success" | "warning" | "danger" | "loading"; export type StatusBadgeSize = "sm" | "md"; export interface StatusBadgeProps extends Omit, "children"> { status?: StatusBadgeStatus; size?: StatusBadgeSize; children?: ReactNode; icon?: ReactNode; showIcon?: boolean; pulse?: boolean; contentKey?: string | number; /** * Make the badge itself a polite live region, so transitions like * loading → success are announced (the icon is `aria-hidden` and a swapped * label alone is not announced). Defaults to true. * * The role goes on the badge rather than on an extra sr-only copy of the * label, so the text exists once and is never read twice. Set to false when * the badge is decorative or the surrounding UI already announces the change. */ announce?: boolean; } const EASE = [0.4, 0, 0.2, 1] as const; const SPRING_LAYOUT = { type: "spring", stiffness: 420, damping: 38, mass: 0.7, } as const; const CONTENT_TRANSITION = { type: "spring", duration: 0.3, bounce: 0, } as const; const statusClassNames: Record = { neutral: "border-border bg-muted text-muted-foreground", info: "border-primary/25 bg-primary/10 text-primary", success: "border-ericts-success/25 bg-ericts-success/10 text-ericts-success-foreground", warning: "border-ericts-warning/25 bg-ericts-warning/10 text-ericts-warning-foreground", danger: "border-destructive/25 bg-destructive/10 text-destructive", loading: "border-primary/25 bg-primary/10 text-primary", }; const sizeClassNames: Record = { sm: "h-6 gap-1.5 px-2 text-[11px]", md: "h-8 gap-2 px-3 text-xs", }; const iconClassNames: Record = { sm: "size-3", md: "size-3.5", }; const statusIcons: Record = { neutral: Circle, info: Info, success: Check, warning: AlertTriangle, danger: X, loading: LoaderCircle, }; const iconVariants: Variants = { initial: { opacity: 0, y: 12, scale: 0.96, rotateX: -35, }, animate: { opacity: 1, y: 0, scale: 1, rotateX: 0, transition: { y: CONTENT_TRANSITION, scale: CONTENT_TRANSITION, rotateX: CONTENT_TRANSITION, opacity: CONTENT_TRANSITION, }, }, exit: { opacity: 0, y: -12, scale: 0.96, rotateX: 35, transition: { y: CONTENT_TRANSITION, scale: CONTENT_TRANSITION, rotateX: CONTENT_TRANSITION, opacity: CONTENT_TRANSITION, }, }, }; const labelVariants: Variants = { initial: { opacity: 0, y: 12, rotateX: -35 }, animate: { opacity: 1, y: 0, rotateX: 0, transition: { y: CONTENT_TRANSITION, rotateX: CONTENT_TRANSITION, opacity: CONTENT_TRANSITION, }, }, exit: { opacity: 0, y: -12, rotateX: 35, transition: { y: CONTENT_TRANSITION, rotateX: CONTENT_TRANSITION, opacity: CONTENT_TRANSITION, }, }, }; export function StatusBadge({ status = "neutral", size = "md", children, icon, showIcon = true, pulse = status === "loading", contentKey, announce = true, className, ...props }: StatusBadgeProps) { const shouldReduceMotion = useReducedMotion(); const Icon = statusIcons[status]; const resolvedContentKey = contentKey ?? (typeof children === "string" || typeof children === "number" ? children : status); return ( {pulse && !shouldReduceMotion ? ( ) : null} {showIcon ? ( ) : null} {children != null ? ( {children} ) : null} ); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://ui.ericts.com/r/status-badge.json","proxyUrl":"https://shadcnregistry.com/r/ericts/status-badge","itemId":"@ericts/status-badge"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/base/ui/status-badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/status-badge.tsx"}]}]]}],"$L54"]}]

Status Badge

Installation

Files

components

Styles