Badge
A Badge component is a small UI element used to display a count, status, or label associated with another element, such as an icon or button. Badges are commonly used to highlight notifications, messages, or any relevant information in a compact and visually distinct way, often appearing as small circles or rectangles with numbers or text.
# Demo
Basic Badges
Simple badges with different colors and styles.
Default
Info
Success
Warning
Error
Solid Badges
Badges with solid background colors.
Default
Primary
Success
Warning
Danger
Purple
Badge Sizes
Different sizes for various use cases.
Small
Medium
Large
Extra Large
Badges with Icons
Add icons to provide more context.
Notifications
Featured
Team
Cart
Notification Badges
Small badges for counts and notifications.
3
12
99+
Status Badges
Indicate status or state with colored badges.
Order Status:
Completed
Payment:
Pending
Subscription:
Active
Account:
Suspended
Interactive Badges
Badges that respond to user interaction.
Clickable
Tag×
Filter
Custom Shapes
Badges with different shapes and borders.
Square
Rounded
Pill
Dashed
Left Border
Accessibility
Badges with proper ARIA attributes for screen readers.
Critical
5 New
✓ Verified
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| size | BadgeSize | BadgeSize.SM | You can pass size of the badge. |
| children | React.ReactNode | Required | You can pass badge content as children. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| role | string | Optional | ARIA role for accessibility. |
# Tags