Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Favorite
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/badge.json
Usage
import { Badge } from "@/components/ui/badge";
<Badge>Badge</Badge>
Variants
The variant prop controls the badge's visual style.
Default
Badge
Secondary
Badge
Outline
Badge
Success
Badge
Info
Badge
Warning
Badge
Destructive
Badge
Sizes
The size prop controls the badge dimensions.
Small
Badge
Medium
Badge
Large
Badge
Pill
The pill prop creates fully rounded badges.
BadgeBadgeBadge
BadgeBadgeBadge
Examples
With link
The asChild prop renders another element with badge styling.
With icon
Icons can be added to badges for visual context.
Favorite
With spinner
The <Spinner /> component indicates loading states when placed inside a badge.
DeletingGenerating
Custom color
IndigoPinkSkyPurple
API Reference
Badge
Label, count, or status badge. Supports variants.
| Prop | Type | Default |
|---|---|---|
variant | default, secondary, outline, success, info, warning, destructive | default |
size | sm, md, lg | md |
className | string | - |
asChild | boolean | false |
For a complete list of props, see the Ark UI documentation.