Badge

A small label component for displaying status, categories, or metadata.

This is a standalone component that does not depend on the assistant-ui runtime. Use it anywhere in your application.

OutlineSecondaryMutedGhostInfoWarningSuccessDestructive

Installation

npx shadcn@latest add https://r.assistant-ui.com/badge.json

npx shadcn@latest add https://r.assistant-ui.com/badge.json

Main Component

npm install @radix-ui/react-slot class-variance-authority

npm install @radix-ui/react-slot class-variance-authority

components/assistant-ui/badge.tsx

"use client";

import type { ComponentProps } from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center justify-center gap-1 rounded-md font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        outline:
          "border border-input bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        muted:
          "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
        ghost:
          "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
        info: "bg-blue-100 text-blue-700 hover:bg-blue-100/80 dark:bg-blue-900/50 dark:text-blue-300",
        warning:
          "bg-amber-100 text-amber-700 hover:bg-amber-100/80 dark:bg-amber-900/50 dark:text-amber-300",
        success:
          "bg-emerald-100 text-emerald-700 hover:bg-emerald-100/80 dark:bg-emerald-900/50 dark:text-emerald-300",
        destructive:
          "bg-red-100 text-red-700 hover:bg-red-100/80 dark:bg-red-900/50 dark:text-red-300",
      },
      size: {
        sm: "px-1.5 py-0.5",
        default: "px-2 py-1",
        lg: "px-2.5 py-1.5 text-sm",
      },
    },
    defaultVariants: {
      variant: "outline",
      size: "default",
    },
  },
);

export type BadgeProps = ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & {
    asChild?: boolean;
  };

function Badge({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: BadgeProps) {
  const Comp = asChild ? Slot : "span";

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      data-size={size}
      className={cn(badgeVariants({ variant, size }), className)}
      {...props}
    />
  );
}

export { Badge, badgeVariants };

"use client";import type { ComponentProps } from "react";import { Slot } from "@radix-ui/react-slot";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const badgeVariants = cva(  "inline-flex items-center justify-center gap-1 rounded-md font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0",  {    variants: {      variant: {        outline:          "border border-input bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",        secondary:          "bg-secondary text-secondary-foreground hover:bg-secondary/80",        muted:          "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",        ghost:          "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",        info: "bg-blue-100 text-blue-700 hover:bg-blue-100/80 dark:bg-blue-900/50 dark:text-blue-300",        warning:          "bg-amber-100 text-amber-700 hover:bg-amber-100/80 dark:bg-amber-900/50 dark:text-amber-300",        success:          "bg-emerald-100 text-emerald-700 hover:bg-emerald-100/80 dark:bg-emerald-900/50 dark:text-emerald-300",        destructive:          "bg-red-100 text-red-700 hover:bg-red-100/80 dark:bg-red-900/50 dark:text-red-300",      },      size: {        sm: "px-1.5 py-0.5",        default: "px-2 py-1",        lg: "px-2.5 py-1.5 text-sm",      },    },    defaultVariants: {      variant: "outline",      size: "default",    },  },);export type BadgeProps = ComponentProps<"span"> &  VariantProps<typeof badgeVariants> & {    asChild?: boolean;  };function Badge({  className,  variant,  size,  asChild = false,  ...props}: BadgeProps) {  const Comp = asChild ? Slot : "span";  return (    <Comp      data-slot="badge"      data-variant={variant}      data-size={size}      className={cn(badgeVariants({ variant, size }), className)}      {...props}    />  );}export { Badge, badgeVariants };

Usage

import { Badge } from "@/components/assistant-ui/badge";

export function Example() {
  return <Badge>Label</Badge>;
}

Examples

Variants

Use the variant prop to change the visual style.

OutlineSecondaryMutedGhostInfoWarningSuccessDestructive

<Badge variant="outline" />     // Border (default)
<Badge variant="secondary" />   // Secondary background
<Badge variant="muted" />       // Muted background
<Badge variant="ghost" />       // No background
<Badge variant="info" />        // Blue/info style
<Badge variant="warning" />     // Amber/warning style
<Badge variant="success" />     // Green/success style
<Badge variant="destructive" /> // Red/error style

Sizes

Use the size prop to change the badge size.

SmallLabel

DefaultLabel

LargeLabel

<Badge size="sm" />      // Small
<Badge size="default" /> // Default
<Badge size="lg" />      // Large

With Icons

Badges automatically style SVG icons.

SuccessFailedPending

As Link

Use the asChild prop to render the badge as a different element, like a link.

GitHub npm

Animated

Combine with CSS transitions for scroll and color animations.

LoadingMission SuccessLoadingMission Success

API Reference

Badge

BadgeProps

The visual style of the badge.

size: "sm" | "default" | "lg"= "default"

The size of the badge.

asChild: boolean= false

Merge props with child element instead of rendering a span.

className?: string

Additional CSS classes.

Style Variants (CVA)

Export	Description
`badgeVariants`	Styles for the badge component.

import { badgeVariants } from "@/components/assistant-ui/badge";

<span className={badgeVariants({ variant: "muted", size: "sm" })}>
  Custom Badge
</span>

"use client"; import type { ComponentProps } from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const badgeVariants = cva( "inline-flex items-center justify-center gap-1 rounded-md font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0", { variants: { variant: { outline: "border border-input bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", muted: "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground", ghost: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground", info: "bg-blue-100 text-blue-700 hover:bg-blue-100/80 dark:bg-blue-900/50 dark:text-blue-300", warning: "bg-amber-100 text-amber-700 hover:bg-amber-100/80 dark:bg-amber-900/50 dark:text-amber-300", success: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100/80 dark:bg-emerald-900/50 dark:text-emerald-300", destructive: "bg-red-100 text-red-700 hover:bg-red-100/80 dark:bg-red-900/50 dark:text-red-300", }, size: { sm: "px-1.5 py-0.5", default: "px-2 py-1", lg: "px-2.5 py-1.5 text-sm", }, }, defaultVariants: { variant: "outline", size: "default", }, }, ); export type BadgeProps = ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean; }; function Badge({ className, variant, size, asChild = false, ...props }: BadgeProps) { const Comp = asChild ? Slot : "span"; return ( <Comp data-slot="badge" data-variant={variant} data-size={size} className={cn(badgeVariants({ variant, size }), className)} {...props} /> ); } export { Badge, badgeVariants };