Badge
Displays a badge or a component that looks like a badge.
Usage
import {Badge} from "@/components/ui/badge";
<Badge>Badge</Badge>;Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | The visual variant of the badge. |
size | "sm" | "md" | "lg" | "xl" | "md" | Sets the size of the badge. Controls padding, text size, and icon size. |
borderRadius | "none" | "sm" | "md" | "lg" | "xl" | "lg" | Sets the border radius of the badge. |
disabled | boolean | false | Whether the badge is disabled. |
status | "idle" | "loading" | "error" | "idle" | Sets the status indicator state. |
loading | boolean | false | Convenience prop to show loading state. Overrides status. |
indicator | (state: BadgeStatus) => React.ReactNode | undefined | Custom indicator renderer function. |
baseClassName | string | undefined | Custom Tailwind classes to apply to the badge. |
asChild | boolean | false | If true, clones props to the nearest child instead of rendering a View. |
children | React.ReactNode | - | The content to display inside the badge. |
Accessibility
The Badge component includes:
- Proper
accessibilityStatefor disabled badges - Semantic structure for screen readers
- Focus management when used as interactive elements
Styling
The Badge component uses Tailwind variants for consistent styling. You can customize the appearance using:
variantprop for color schemessizeprop for sizing (padding, text size, and icon size)borderRadiusprop for corner stylingbaseClassNameprop for custom Tailwind classesdisabledprop for opacity changes
Size Variants
The size prop controls multiple styling aspects:
- sm: Compact badge with
px-1.5 py-0.5,text-xs, and 12px icons - md: Default badge with
px-2 py-0.5,text-xs, and 12px icons - lg: Large badge with
px-2.5 py-1,text-sm, and 16px icons - xl: Extra large badge with
px-3 py-1.5,text-base, and 20px icons
Status Indicators
The Badge supports status indicators for loading and error states:
- Loading: Shows a spinning indicator by default
- Error: Shows an error indicator by default
- Idle: No indicator shown
- Custom: Use the
indicatorprop for custom indicators
The loading boolean prop provides a convenient way to show loading state without managing the status prop directly.