Badge and tag styles

A pink badge with a cyan corner dot that emits an expanding ring continuously, signaling a live notification.

An amber price tag with a notched right edge using clip-path — perfect for discount or sale labels.

A small green dot with an outward-pulsing ring paired with a status label — common in dashboards for 'online' state.

Solid blue pill badge in three example labels.

Translucent blue outline pill badge in three example labels.

Status pill tinted with color-mix() from one blue value — change the base color and the fill and border follow.

Filter chip with a dismiss button that spins and fills ocean on hover.

Physical-looking keyboard shortcut caps that depress on hover and read blue when active.

Filter chips with a built-in × that spins on hover, filling ocean when the chip is active.

Unread counter pinned to the corner of a carrier tile, with a background-colored ring so it stays legible over whatever sits beneath it.

Notched banner cut with `clip-path` and given a drop-shadow rather than a box-shadow, so the shade follows the arrow instead of boxing it.

Scalloped seal cut with an eighteen-point `clip-path` and a tick drawn from two borders, so the whole mark is one element and no SVG.

Eight-point star made from two rounded squares at 45 degrees to each other — cheaper than a polygon and it keeps soft corners.

Rank chip whose ring is a conic gradient showing progress to the next tier, with the raw figures underneath in tabular numerals.

Taxonomy links keyed by a colour dot rather than a filled background, so a row of them stays readable instead of turning into a paint chart.

Percentage-change pill with a border-drawn caret, tabular figures so a column of them stays aligned, and a tinted fill derived from the same hue as the arrow.

Swallow-tail flag cut from a single clip-path, the notch shallowing on hover so the tag squares off as it is picked out of a list.

Two-cell status badge with a neutral key against a coloured value, the pairing that makes a wall of these scannable down the value column alone.

Retail swing-ticket silhouette — pointed left end cut by clip-path with a punched eyelet — tilting on hover as though hanging from the hole.

On-air LIVE pill whose white dot throws two staggered expanding rings.

Amber admission-ticket tag with punched notches and a perforated stub that tilts on hover.

Dark pill wrapped in a thin violet-to-amber gradient rim that sweeps and glows on hover.

Sky-blue tag with three overlapping avatars and a +N counter that fan apart on hover.

Lime sticker with a white die-cut border, slapped on at an angle, that springs upright on hover.