Overview
Design a status badge with your own text, one of five color schemes, and an optional pulsing status dot. The live canvas shows the badge among related examples, and the export box provides the markup and CSS for a pill-shaped, accessible status label.
How It Works
Type the badge text, pick a color scheme from emerald, blue, purple, amber, or rose, and toggle the pulsing dot. The canvas updates immediately and also shows two reference badges, a frosted-glass tag and a fixed blue example, for comparison. The export box below holds the HTML and CSS; copy it with one click.
Step-by-Step Usage Guide
- Enter the status text and pick a color scheme.
- Toggle the pulsing dot if the badge signals live status.
- Copy the HTML and CSS tab, which contains the complete styled markup.
- Add CSS rules for purple, amber, or rose yourself if you chose one of those schemes.
Technical Specifications & Standards
The generated CSS is complete for two of the five color schemes: the emerald and blue rules are emitted in full, each as a tinted background, matching text color, and a translucent border. The purple, amber, and rose options render in the live preview but have no corresponding rules in the exported stylesheet, so selecting them gives you a preview you must hand-color; extend the CSS with your own rgba values following the emerald pattern. The pulse dot is self-contained: a small circle filled with currentColor and animated with a keyframes rule that scales and fades it over 1.5 seconds, so it inherits whatever text color the badge ends up with. The pill shape comes from a fully rounded border radius on a small inline-flex container, which makes the badge line-height sensitive; very long text stays on one line and grows horizontally. Like the other component studios, the Tailwind and React tabs are abbreviated scaffolds, and the complete, copy-ready artifact is the HTML and CSS tab.
Targeted Use Cases
- Marking a service or environment as production-ready or degraded in a dashboard.
- Labeling build and deployment states in an internal tool.
- Adding live-status indicators with a pulsing dot to an operations view.
- Standardizing pill-shaped labels across a product's tables and cards.
Notes & Gotchas
- Stick to emerald or blue unless you are prepared to write the missing CSS for the other schemes.
- Keep the pulse dot for genuinely live states; it draws the eye and should not decorate static labels.
- Pair color with text, not color alone, so the status survives color-blindness and grayscale printing.
- Port the CSS rules into the abbreviated Tailwind or React scaffolds if you use those stacks.
Frequently Asked Questions
Why is there no CSS for the purple, amber, or rose option?
The export only emits the emerald and blue rules. The other three schemes render in the preview but are not in the stylesheet, so copy the emerald rule and substitute your own rgba color values.
What makes the dot pulse, and can I recolor it?
A keyframes animation scales and fades a small circle whose fill is currentColor, so it follows the badge text color automatically. Changing the badge's color rule recolors the dot with it.
Does the badge wrap onto multiple lines?
It is an inline-flex pill that grows horizontally and stays on one line. Very long labels will widen the pill rather than wrap, so keep the text short.
Are the Tailwind and React exports complete?
No, they are abbreviated scaffolds. The complete, styled artifact is the HTML and CSS tab; port it into your framework of choice from there.