Badges, chips, and status indicators are small label elements used throughout every web interface — category tags on blog posts, status pills on order tracking pages, removable filter chips on search results, and live status dots on dashboards. This snippet provides all three patterns in a single component with composable CSS classes.

Semantic colour badges

The .badge class creates a pill label with text-transform: uppercase and letter-spacing: 0.4px — standard badge typography. Each colour variant uses a matching rgba tinted background: .badge.indigo uses background: rgba(99,102,241,0.1) with color: #4f46e5. The rgba approach gives the badge a transparent tint that works on both white and grey backgrounds without looking opaque. Five variants: indigo, green, yellow, red, and gray cover the full semantic range (neutral, success, warning, danger, muted).

Removable chips

.chip elements are display: inline-flex with a remove button (.remove) inside. The remove × character has color: #94a3b8 that transitions to color: #dc2626 on hover — a clear signal that clicking it will remove the chip. Wire the onclick to chip.remove() or a state update in your framework.

Status indicators with pulse dot

The .status pattern pairs a coloured 8px .dot circle with a label. The .dot.pulse variant adds a CSS keyframe animation — box-shadow: 0 0 0 0 rgba(34,197,94,0.5) expanding to 0 0 0 8px rgba(34,197,94,0) and back — creating a ripple pulse effect that communicates live/active status. This is the same pattern used by status pages, chat applications, and real-time dashboards.

Where each pattern fits

Badges work on static labels — categories, tags, plan names, version numbers. Chips work on user-applied filters or selections that can be removed. Status dots work on user presence, service health, connection state, and any real-time indicator.

The ::before dot indicator

Status badges use a ::before pseudo-element with content: '' and border-radius: 50% for a small coloured dot before the text label. The dot inherits its colour from the badge's text colour using background: currentColor — change the text colour and the dot updates automatically. The dot has margin-right: 5px and is vertically centred using position: relative; top: -0.5px.

Removable filter chips

The filter chip pattern uses a .chip container with the label text and a × remove button inside. The remove button has font-size: 14px and a hover background that turns slightly red, giving a clear remove affordance without a destructive-looking icon. Clicking × calls chip.remove() and optionally fires a custom event: chip.dispatchEvent(new CustomEvent('chip-remove', { detail: chip.dataset.value, bubbles: true })).

Animated chip entry

New chips can animate in via @keyframes: opacity 0 → 1 and scale(0.8) → 1 over 0.15s. Apply the keyframe to .chip. When chips are removed, animate out similarly by adding .removing class, then removing the DOM element on animationend. This makes the chip row feel dynamic and responsive to additions and deletions.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to eyeball every rgba tint and keyframe by hand to understand this one. Paste the HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly why the badge backgrounds use a 10% opacity rgba fill tied to the same hue as the text color instead of a flat pastel background, or how the box-shadow keyframe in the pulse animation produces a ripple rather than a simple fade. The same assistant can help optimize it — asking whether the pulse animation should pause when the tab is backgrounded to save cycles, or how to add the missing removable-chip JavaScript cleanly without inline onclick handlers. It's also a quick way to extend the set: ask it to add an animated entrance for new chips, a dismissible toast-style badge, or a compact avatar-plus-status combo. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a set of "badges, chips, and status dots" in plain HTML and CSS (no JavaScript required for the badges and dots; the chips need a small removal script) matching this exact structure.

Requirements:
- Five badge color variants (indigo, green, yellow, red, gray), each a small uppercase pill with letter-spacing, using a background that is a 10% opacity rgba tint of the variant's own color rather than a flat pastel, paired with a solid, fully-saturated text color of the same hue.
- Removable filter chips: an inline-flex pill containing an icon, a text label, and a small "x" remove control; clicking the remove control must remove only that chip element from the DOM (e.g. via closest chip lookup), leaving sibling chips untouched, and the remove control's color must shift to a red hover state as a clear destructive-action affordance.
- Status indicators: a small round colored dot next to a text label, in four color states (green, yellow, red, gray) representing online, away, busy, and offline.
- The green "online" dot must run a continuous CSS keyframe animation that expands and fades a box-shadow ring outward from the dot (starting as a tight solid ring and ending fully transparent and larger), looping indefinitely, while the dot itself stays a solid filled circle throughout.
- All three patterns (badges, chips, status dots) must be visually distinguishable at a glance and usable independently of each other in a layout.

Step by step

How to Use

1
Load the snippetClick "Badges & Chips" in the sidebar. The preview shows semantic badges, removable chips with hover X, and status dots including the animated pulse.
2
Pick the patterns you needCopy only the HTML and CSS for the pattern you need — .badge for labels, .chip for removable tags, .status/.dot for presence indicators.
3
Change badge coloursIn the CSS panel, update the rgba values on each .badge.colour class to match your brand or semantic system.
4
Wire chip removalIn the HTML panel, add onclick="this.closest('.chip').remove()" to each .remove button to make chips removable.
5
Change the pulse dot colourUpdate the rgba(34,197,94,...) values in the @keyframes pulse and .dot.pulse CSS to your status colour.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Blog and article category tags

Use .badge variants to label blog posts by category — Design, Development, Marketing. The uppercase pill style reads clearly in compact card layouts.

Search filter chips

Render applied search filters as removable .chip elements. Wire the remove button to update filter state and re-run the search query.

User presence and chat status

Use the .dot.pulse animation for "Online/Active" and static dots for Away, Busy, and Offline. The pulse communicates live status without text.

Order and task status labels

Map order statuses (Pending, Processing, Shipped, Delivered, Cancelled) to semantic badge colours. Green for success, yellow for in-progress, red for issues.

Learn CSS keyframe pulse animation

The pulse dot uses box-shadow expanding to zero opacity. Edit the animation in the CSS panel to understand how the ripple radius and opacity create the live indicator effect.

Plan and feature tier labels

Label features in a pricing table with "Free", "Pro", "Enterprise" badges. The indigo badge for featured plans and gray for locked features follows standard SaaS convention.

Got questions?

Frequently Asked Questions

A badge is a static informational label — a category, status, or tier marker that the user cannot interact with. A chip is an interactive element, typically a filter or tag that the user can remove. Badges are display-only; chips have a remove action.

rgba(99,102,241,0.1) creates a 10% opacity tint of the badge colour. This looks clean on both white and light-grey backgrounds without appearing as an opaque coloured block. Opaque badge backgrounds (like background: #e0e7ff) look different on grey vs white cards; rgba tints adapt to both.

Add onclick="this.closest('.chip').remove()" to the .remove button element. This removes the closest parent .chip from the DOM. In React, manage chips as an array in state and filter out the removed chip on click.

@keyframes pulse expands box-shadow from 0 0 0 0 rgba(34,197,94,0.5) to 0 0 0 8px rgba(34,197,94,0) and back. The shadow starts as a tight coloured ring and expands outward while fading to transparent, creating the ripple effect. Only the green .dot.pulse variant uses this animation.

Yes. Copy an existing .badge.colour CSS block and rename the class. Pick a matching foreground and background rgba colour. The base .badge styles handle all the typography and shape — the variant only needs to set background and color.

Yes. Click "JSX" to download a React component or "Tailwind" for a Tailwind version. In Tailwind, the indigo badge maps to: text-indigo-600 bg-indigo-50 uppercase text-xs font-bold tracking-wide px-2.5 py-0.5 rounded-full.

Loading…