Badge
FeedbackA small label component for displaying status, counts, or categories. Use badges to highlight information or indicate status within other components.
Import
import { Badge, Chip } from "@/components/ui/badge";Usage
Variants
Different badge styles for various purposes
DefaultPrimarySecondarySuccessErrorWarningInfoOutline
Status Indicators
Using badges to indicate status
In StockLow StockOut of StockPre-order
Chips (Removable)
Badges with close button for filtering
In-Wall SpeakersOutdoorWireless
In Context
Badges used within other components
Sonance VP66New
Mariner 86Limited
Classic SeriesDiscontinued
API Reference
variant"default""default" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "outline"Visual style of the badge
size"md""sm" | "md"Size of the badge
children*—ReactNodeBadge content
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "outline" | "default" | Visual style of the badge |
size | "sm" | "md" | "md" | Size of the badge |
children* | ReactNode | — | Badge content |