shadcn.io is not affiliated with official shadcn/ui
Status Pulse Text puts a coloured dot before a status, "All systems operational", and lets a soft ring swell out of the dot and fade, again and again, the ping that says something is live. The dot takes the theme's status colours, success, info, warning, destructive or muted, and scales with the text, so it fits a status page, a dashboard row or a "Recording" badge.
Use it for a live status: a service that's up, a deployment under way, a stream on air. For a dot with no words, such as on an avatar, use Status; for someone typing, Typing Indicator Text. It's CSS only: one keyframe animation the install adds to your stylesheet scales and fades the ring, at most once a second, with no script and no animation library. With reduced motion the ring is gone and the dot stays.
Installation
Usage
import { StatusPulseText } from "@/components/ui/status-pulse-text";<StatusPulseText text="All systems operational" />Demos
Variants
variant is the dot's colour from the theme: success, the default, info, warning, destructive or muted. pulse={false} keeps the dot still, for a status where nothing is happening, such as offline, so the live ones stand out.
Badge
It takes the size and the colour of the text around it, so it sits in a badge as it is. duration is one pulse of the ring, 2000 ms by default; it never runs faster than one a second.
Accessibility
The status is said in words, so it never depends on colour: screen readers read the text, and the dot and its ring are hidden from them. In forced colours the dot is drawn in the system's text colour. The ring pulses at most once a second, never flashing, and stops with reduced motion, where the dot stays.
FAQ
How do I use a colour outside the variants?
Set --status-pulse-text-color to any CSS colour, through style or a class such as [--status-pulse-text-color:var(--chart-2)], and leave variant out: the dot and the ring take it.
Where do the colours come from?
From the theme's --success, --info, --warning, --destructive and --muted-foreground. The install adds --success, --info and --warning to your theme if it doesn't have them yet, in light and dark.
Should every status pulse?
No: a page full of pulsing dots says nothing. Pulse the few that are live or need attention, and pass pulse={false} to the rest; the dot stays, still, in its colour.
Is a change of status announced?
Not by itself. When a status changes while the page is open and that matters, render it inside an element with role="status" that's always on the page, and screen readers announce the new text.
API Reference
StatusPulseText
<span> data-slot="status-pulse-text"
textstring
The status, in words: the dot's colour never says it alone.
duration?number
One pulse of the ring, in milliseconds; never faster than one a second. @default 2000.
pulse?boolean
Whether the ring pulses; leave it still for a status where nothing is happening. @default true.
- Default
true
variant?"success" | "info" | "warning" | "destructive" | "muted"
The dot's colour, from the theme. @default "success".
- Type
"success" | "info" | "warning" | "destructive" | "muted"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--status-pulse-text-colorstring
The dot's colour, any CSS colour (the theme's --success).
--status-pulse-text-durationstring
One pulse of the ring (2s).
Related
- Pro
Typing Indicator Text
DecorativeShow that someone is typing
Shimmering Text
DecorativeLight through a status while it works
- Pro
Relative Time Text
NumbersSay when it last changed
- Pro
Log Stream Text
MotionA live log beside the status
- Pro
Clock Text
NumbersA live clock for the status page
- Pro
Breathe in, breathe out
Breathing Text
MotionThe whole line fading in and out