Badges
Badge and tag components for status indicators
Examples
Default Badges
Basic badge variants for common use cases.
Account Settings
Manage your account details and preferences.
Password Settings
Update your password to keep your account secure.
Notification Preferences
Choose how you want to be notified.
html
Semantic Colors
Badges with semantic meaning for status indication.
html
Soft Variants
Subtle background with colored text using .badge-soft-{color} class.
html
Sizes
Small, default, and large badge sizes.
.progress-xs
.progress-sm
.progress (default)
.progress-lg
html
With Dot Indicator
Add status dots using .badge-dot
class.
Active
Pending
Inactive
Offline
html
With Icons
Combine badges with icons for enhanced visual communication.
Edit
Copy
Share
Delete
html
Rounded Square
Less rounded corners using .badge-rounded class.
Default
Success
Warning
Outline
html
Usage
The badge component is located at src/components/ui/badge/badge.scss
Available Classes
.badge
.badge-secondary
.badge-destructive
.badge-outline
.badge-success
.badge-warning
.badge-info
.badge-soft-*
.badge-sm
.badge-lg
.badge-dot
.badge-rounded