Badge

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

NewBetaOutlineCritical

Available props

Toggle to update the preview

Secondary variant

variant: "secondary"

Outline variant

variant: "outline"

Destructive variant

variant: "destructive"

Prop reference

Auto-generated from the component source

Badge

className
variant
asChild = false

React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean; }

Code

// owner: Sona
"use client";

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

export default function BadgeExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>New</Badge>
      <Badge variant="secondary">Beta</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Critical</Badge>
    </div>
  );
}

Badge

Component preview

On this page

Command Palette