# Badges

> Badges, tags, pills and status chips.

- [Badge Button](https://www.assembli.design/components/badge-button.md): Buttons that carry a count or label: inline badge, GitHub-style split count and a pressed toggle that increments.
- [Severity Badges](https://www.assembli.design/components/severity-badges.md): Info, success, warning and critical badges with icons, plus priority badges with signal bars.
- [Feature Tags](https://www.assembli.design/components/feature-tags.md): New, Beta, Pro, Soon, Free and Deprecated tags for nav items and settings, with a shimmer on New.
- [Duration Badges](https://www.assembli.design/components/duration-badges.md): Video duration overlays, due-date urgency badges and read-time badges for lists and cards.
- [Label Badges](https://www.assembli.design/components/label-badges.md): Issue-tracker labels from any hex colour with readable text, in solid, soft and outline, plus an auto colour from a string.
- [Streak Badge](https://www.assembli.design/components/streak-badge.md): Day-streak flame that changes colour by milestone, with a seven-day week row of checks.
- [Filter Chips](https://www.assembli.design/components/filter-chips.md): Selectable filter chips with a check that slides in, optional counts and avatars, single or multi select.
- [Presence Badge](https://www.assembli.design/components/presence-badge.md): Initials avatars with an online, away, busy or offline status dot, plus a standalone dot and labelled pill.
- [Delta Badges](https://www.assembli.design/components/delta-badges.md): Change indicators with arrow, sign and percentage that read green or red, and flip when lower is better.
- [Removable Badges](https://www.assembli.design/components/removable-badges.md): Dismissible tag chips with a close button, Backspace to remove and an animated exit that closes the gap.
- [Badge Kit](https://www.assembli.design/components/badge-kit.md): The everyday badge: soft, solid, outline and dot variants in seven tones and three sizes, with icons and pill or rounded shape.
- [Keycap Badges](https://www.assembli.design/components/keycap-badges.md): Physical keyboard keycaps for shortcuts that depress when the real key is pressed.
- [Split Badges](https://www.assembli.design/components/split-badges.md): Shields-style two-segment status badges (label and value) whose value rolls when it changes, for READMEs and dashboards.
- [Swing Tag](https://www.assembli.design/components/swing-tag.md): Hang-tag price label on a string that swings like a pendulum on hover and settles with damping.
- [Corner Ribbons](https://www.assembli.design/components/corner-ribbons.md): Diagonal corner sashes and swallowtail banner tags with folded ends for New, Sale and Featured callouts.
- [Rank Shields](https://www.assembli.design/components/rank-shields.md): Bronze to diamond tier shields with metallic gradients, faceted gems, star pips and a locked state.
- [Verified Marks](https://www.assembli.design/components/verified-marks.md): Scalloped verification seals in blue, gold, green and graphite whose checkmark draws itself in, with a name-plus-seal inline form.
- [Label Tape](https://www.assembli.design/components/label-tape.md): Embossed label-maker tape in vinyl colours with raised white lettering, a cut end and a serrated edge.
- [Count Badge](https://www.assembli.design/components/count-badge.md): Notification count badge with rolling odometer digits, 99+ overflow, a ping on increase and an icon-button host.
- [Enamel Pins](https://www.assembli.design/components/enamel-pins.md): Hard-enamel lapel pins with a metal rim, recessed colour fields and a glossy highlight that tilts with the pointer.
- [Ticket Stub Badges](https://www.assembli.design/components/ticket-stub-badge.md): Perforated admission-ticket badges with punched notches, a tear line and a serial number.
- [Ink Stamps](https://www.assembli.design/components/ink-stamp.md): Rubber stamps that thump onto the page with rough ink texture, a slight tilt and a bounce, and re-stamp on click.
- [Holo Foil Badge](https://www.assembli.design/components/holo-foil-badge.md): Iridescent holographic plan badges whose rainbow foil, sparkle and specular sheen follow the pointer.
- [Rotating Seal Badge](https://www.assembli.design/components/seal-badge.md): Circular badge with text set on a path that slowly rotates around a centre icon, and spins up on hover.
- [Announcement Pill](https://www.assembli.design/components/announcement-pill.md): The 'Introducing X →' pill above a hero: a gradient tag chip, message and an arrow whose shaft draws in on hover, wrapped in a hairline border with a comet of light orbiting it. CSS only.
- [Emoji Reactions](https://www.assembli.design/components/emoji-reactions.md): Reaction bar with count pills that roll their digits, a picker popover whose emoji swell under the pointer, and a little particle burst when you react. Controlled or uncontrolled; keyboard accessible.
- [Status Badges](https://www.assembli.design/components/status-badges.md): Status-page kit: pills with live ping dots for operational, degraded, outage and maintenance, plus uptime rows of per-day bars with tooltips and a computed uptime percentage.

Back to [all components](https://www.assembli.design/components.md).