A badge is a small chip for a status, a category or a count. Neutral badges carry most labels; hue appears only when the badge states a status, and always beside words that say the same thing.
badge-live makes the dot send out a ring, for something that is happening now: a recording, a deployment in progress, a stream. Use it for one thing on a view; a page of pulsing dots says nothing. With reduced motion it is a plain dot.
badge-corner places a count on the corner of its nearest positioned parent and cuts it out with a ring in the color of the surface it sits on, which it reads from --surface-color. Set --badge-ring on a background of your own. Describe the count in the parent's accessible name.
A small raised sheet, for a badge that sits on a busy surface. With badge
badge-ink
Solid ink with inverse text. With badge
badge-info
A wash of the info hue. With badge
badge-success
A wash of the success hue. With badge
badge-warning
A wash of the warning hue. With badge
badge-danger
A wash of the danger hue. With badge
badge-dot
A leading 6px dot in the badge's tone. With badge
badge-live
With badge-dot: the dot sends out a ring, for something happening now. With reduced motion it is a plain dot. With badge
badge-corner
A count on the corner of its nearest positioned parent, cut out by a ring of the surface it sits on. Describe the count in the parent's accessible name. With badge
/* Badge: a small chip for a status, a category or a count. Hue appears only with a status. */@layer components {.badge{--badge-height:1.375rem;--badge-padding-x:.4375rem;--badge-font-size:.71875rem;--badge-radius:var(--radius-chip);--badge-tone:var(--color-text-muted);--icon-size:.875rem;--icon-offset:-.0625rem;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:.3125rem;height:var(--badge-height);min-width:var(--badge-height);padding:0var(--badge-padding-x);border-radius:calc(var(--badge-radius)*var(--corner-scale));corner-shape:var(--corner-shape);background:var(--color-surface-chip);color:var(--color-text-body);box-shadow:inset000.5pxvar(--color-line-contour);font:var(--font-weight-control)var(--badge-font-size)/1var(--font-family-sans);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;/* A badge may be a link, such as the announcement over a hero; it never takes a link's underline. */text-decoration:none;vertical-align:middle;&.badge-sm{--badge-height:1.125rem;--badge-padding-x:.3125rem;--badge-font-size:.65625rem;--icon-size:.75rem;--badge-radius:calc(var(--radius-chip)-1px);gap:.25rem;}&.badge-lg{--badge-height:1.625rem;--badge-padding-x:.5625rem;--badge-font-size:.78125rem;--icon-size:1rem;--badge-radius:calc(var(--radius-chip)+1px);}&.badge-pill{--badge-radius:999px;corner-shape:round;padding-inline:calc(var(--badge-padding-x)+1px);}&.badge-outline{background:transparent;box-shadow:inset000.5pxvar(--color-line-strong);}/* Raised: a small sheet, for a badge that sits on a busy surface. */&.badge-raised{@apply--surface-sheet;color:var(--color-text-strong);box-shadow:var(--shadow-raised);}&.badge-ink{--badge-tone:currentColor;background:var(--color-surface-inverse);color:var(--color-text-inverse);box-shadow:inset0.5px0var(--color-ink-highlight),000.5pxvar(--color-ink-edge);}&:is(.badge-info,.badge-success,.badge-warning,.badge-danger){background:color-mix(in oklab,var(--badge-tone)8%,var(--color-surface-raised));color:color-mix(in oklab,var(--badge-tone)82%,var(--color-text-strong));box-shadow:inset000.5pxcolor-mix(in oklab,var(--badge-tone)36%,transparent);}&.badge-info{--badge-tone:var(--color-info);}&.badge-success{--badge-tone:var(--color-success);}&.badge-warning{--badge-tone:var(--color-warning);}&.badge-danger{--badge-tone:var(--color-danger);}/* A leading status dot in the badge's tone. */&.badge-dot::before{content:'';flex:none;width:6px;height:6px;border-radius:999px;background:var(--badge-tone);}/* Live: the dot of something happening now sends out a ring. Without motion it is a plain dot. */&.badge-live::before{animation: badge-live 1.8svar(--easing-glide)infinite;}@media(prefers-reduced-motion:reduce){&.badge-live::before{animation:none;}}/* A count on the corner of its nearest positioned parent, cut out by a ring of the surface it sits on. */&.badge-corner{--badge-height:1.125rem;corner-shape:round;--badge-padding-x:.3125rem;--badge-font-size:.65625rem;--badge-radius:999px;position:absolute;top:0;inset-inline-end:0;translate:35%-35%;outline:2pxsolidvar(--badge-ring,var(--surface-color,var(--color-surface-base)));/* It hangs off the end corner, whichever side that is. */&:dir(rtl){translate:-35%-35%;}}@media(forced-colors:active){outline:1pxsolid CanvasText;outline-offset:-1px;}}}@keyframes badge-live {from{box-shadow:0000color-mix(in oklab,var(--badge-tone)45%,transparent);}70%, to{box-shadow:0005pxtransparent;}}