Badge with a status dot
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A 5px round dot in the current text color ahead of the label, on an info light chip for live states
When to use
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
When not to use
- A status summary that opens on hover over a trigger: use the Tooltip component
- An action that saves, opens or submits a form when pressed: use the Button component
- A finished KPI or profile tile with a trend or status chip as one detail: use the Card blocks
Agent notes
- The dot
spanis paintedcurrentColor, so it follows thevarianttext color; swap that background class to color the dot alone - Import
Badgefrom@/components/reui/badge; the shadcnBadgeof the same name lackssize,radiusand the success, info and warning variants - The default
radiusfollows the style, square in lyra and sera and a pill in maia, luma and rhea;radiusfull gives a pill in every style
https://reui.io/components/badge/c-badge-22.mdget_example("c-badge-22")npx shadcn@latest add @reui/c-badge-22Shadcn Components in Badge Status Dot
About Shadcn Badge Status Dot
Badge with a status dot. Built with the Badge component. A free, open source shadcn badge example you can install with npx shadcn@latest add @reui/c-badge-22 and edit as your own code.
What You Can Build With Shadcn Badge Status Dot
- Composes Badge, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-badge-22
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Badge Examples
- Default Default badge
- Secondary Secondary badge
- Destructive Destructive badge
- Success Success badge
- Info Info badge
- Warning Warning badge
- Outline Outline badge
- Primary Outline Primary outline badge
- Destructive Outline Destructive outline badge
- Info Outline Info outline badge
- Success Outline Success outline badge
- Warning Outline Warning outline badge
Related Shadcn Component Categories
Open-source shadcn breadcrumb components for navigation trails, docs hierarchy, and app wayfinding.
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Open-source shadcn button components for primary actions, form submissions, and toolbar controls.
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Frequently Asked Questions
When should I use Shadcn Badge Status Dot?
Use it for a 5px round dot in the current text color ahead of the label, on an info light chip for live states.
Shadcn Badge as a whole fits:
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
For a status summary that opens on hover over a trigger, use the Tooltip component. For an action that saves, opens or submits a form when pressed, use the Button component. For a finished KPI or profile tile with a trend or status chip as one detail, use the Card blocks.
How do I install Shadcn Badge Status Dot?
Is Shadcn Badge Status Dot free to use?
Which components does Shadcn Badge Status Dot use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.