Badge Component Documentation

Overview

The Badge component displays a badge or badge-like visual element. It extends standard span functionality with customizable variants and shapes.

Type Definition

interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
  asChild?: boolean;
  variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "accent";
  type?: "default" | "circle" | "dot";
}

Properties

Property	Type	Default	Purpose
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'accent'`	`'default'`	Determines the visual styling
`type`	`'default' \| 'circle' \| 'dot'`	`'default'`	Controls shape and layout presentation
`asChild`	`boolean`	`false`	Enables `Slot` rendering for child element styling
span props	`ComponentProps<'span'>`	—	All native HTML span attributes supported

Basic Examples

Simple badge variants:

<Badge>Default</Badge>
<Badge variant="success">Deployed</Badge>
<Badge type="circle">3</Badge>
<Badge type="dot" />

Usage Patterns

Variant showcase:

<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">warning</Badge>

Circular badge indicators:

<Badge type="circle">3</Badge>
<Badge variant="secondary" type="circle">3</Badge>
<Badge variant="destructive" type="circle">3</Badge>
<Badge variant="success" type="circle">3</Badge>
<Badge variant="warning" type="circle">3</Badge>

Dot indicators:

<Badge type="dot" />
<Badge variant="secondary" type="dot" />
<Badge variant="destructive" type="dot" />
<Badge variant="success" type="dot" />
<Badge variant="warning" type="dot" />

2.1 KiB Raw Blame History