Badge
Displays a badge or label for categorization or status indication.
Installation
import { Badge } from "@sourceful-energy/ui"Usage
Badge
Examples
All Variants
Default
Secondary
Outline
Destructive
Success
Warning
Info
Energy
Soft Variants
Success
Warning
Error
Info
Energy
Outline Variants
Success
Warning
Error
Info
Fully Rounded (Pill)
Default
Online
Pending
New
With Icons
Verified
Failed
Warning
Active
Loading State
Loading
Syncing
Processing
Status with Dot
Online
Away
Offline
Device Types
Solar
Battery
EV Charger
In Context
Device Status:
Connected
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "energy" | "success" | "warning" | "info" | "*-soft" | "*-outline" | "default" | The visual style of the badge. Soft and outline variants available for success, warning, destructive, info, energy. |
| rounded | "default" | "full" | "default" | The border radius. Use 'full' for pill-shaped badges. |
| className | string | - | Additional CSS classes. |
Accessibility
- Badges are decorative by default
- Use meaningful text content for screen readers
- Don't rely solely on color to convey meaning
- Consider adding aria-label for icon-only badges