Badge
Small labels for status indicators, tags, and categorization
Variants
Different visual styles for various contexts.
Default
Secondary
Outline
Muted
Destructive
Shapes
Pill (default) and rounded rectangle shapes.
Pill (Default)
Rounded
Secondary Pill
Secondary Rounded
Tech Stack Tags
Outline badges for tech stack or category tags.
React
TypeScript
Tailwind
Next.js
Node.js
Status Indicators
Badges with status dots for connection states.
Online
Away
Offline
With Icons
Badges with leading icons for enhanced context.
Verified
Rejected
Pending
Warning
Notification Counts
Compact badges for notification indicators.
3
Feature Badges
Highlight premium or special features.
Premium
Fast
Secure
User Roles
Display user roles in a list context.
Workspace Members
Manage access and permissions
3 seats
JS
John Smith
john@example.com
Admin
JD
Jane Doe
jane@example.com
Editor
BW
Bob Wilson
bob@example.com
Viewer