Badge
A small label component for status indicators, categories, and counts
DefaultSecondaryOutlineDestructive
A badge component for displaying status indicators, labels, counts, or categories. Useful in notebooks for showing kernel state, cell status, or output metadata.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/badge.jsonCopy from the nteract/elements registry.
Usage
import { Badge } from "@/registry/primitives/badge"
export function Example() {
return <Badge>New</Badge>
}Variants
Default
Default
<Badge>Default</Badge>Secondary
Secondary
<Badge variant="secondary">Secondary</Badge>Outline
Outline
<Badge variant="outline">Outline</Badge>Destructive
Destructive
<Badge variant="destructive">Destructive</Badge>Ghost
Ghost
<Badge variant="ghost">Ghost</Badge>Link
Link
<Badge variant="link">Link</Badge>Notebook Examples
Python 3.11Idle3 outputsError
<Badge variant="secondary">Python 3.11</Badge>
<Badge variant="outline">Idle</Badge>
<Badge>3 outputs</Badge>
<Badge variant="destructive">Error</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "default" | Visual style variant |
asChild | boolean | false | Render as child element using Radix Slot |
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLSpanElement> | — | All standard span attributes |