Status Badge
Displays a real-time status indicator with a pulsing dot and color coding to show whether a service or user is online or busy.
6 KB
•Updated on September 12, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-status-badgeUsage
Code
import { StatusBadge } from '@/components/spaceui/status-badge'Code
<StatusBadge status="available" primaryText="Disponible" size="default">
<Link href="#contact" className="inline-flex items-center gap-1">
<span>1 place restante pour ce mois-ci</span>
<ArrowUpRight className="size-3.5" />
</Link>
</StatusBadge>API Reference
StatusBadge Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | online|available|busy|away|offline|error|warning|info | online | Semantic status controlling indicator dot color and ping wave color |
primaryText | string | - | Primary bold label text shown next to the indicator |
mode | inline|stack | inline | Layout mode (inline for badge, stack for multi-line card) |
animated | boolean | true | Enables animated radar ping wave effect |
showIndicator | boolean | true | Whether to display the status indicator dot |
variant | default|inverted|outline | default | Visual style variant for the badge container |
size | default|xs|sm|md|lg | default | Sizing scale for badge and indicator |
indicatorClassName | string | - | Custom class name for the indicator dot |
primaryTextClassName | string | - | Custom class name for the primary text label |
secondaryTextClassName | string | - | Custom class name for the secondary text / children |
indicatorBadge | boolean | false | In stacked mode, encloses the indicator dot in a square badge container |
Features
Sizes
Variants
Radar Ping & Animation
Stacked Mode
Examples
Planning availability with link
Unavailable with resumption date
Mission quotas
Freelance and direct project callout
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.