Components
Status Badge
Versatile status indicators with animations, multiple variants, and real-time updates
Configuring your account...
Please wait while we prepare everything for you
Multiple variants and animations
Real-time status updates
Usage
import StatusBadge from './StatusBadge';
<StatusBadge
variant="success"
label="Online"
size="md"
animated={false}
pulse={false}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive' | 'loading' | - | Badge variant |
label | string | - | Badge text |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size |
animated | boolean | false | Enable icon animation |
pulse | boolean | false | Enable pulse animation |
className | string | '' | Additional CSS classes |
Variants
- success: Green badge for positive states
- error: Red badge for error states
- warning: Yellow badge for warning states
- info: Blue badge for informational states
- pending: Gray badge for pending states
- active: Green badge for active states
- inactive: Gray badge for inactive states
- loading: Blue badge with spinning icon
Features
- 8 different status variants
- 3 size options (sm, md, lg)
- Pulse and spin animations
- Status dot indicators
- Dark mode support
- Real-time status updates
- Customizable styling