Small count or status marker: unread on a nav item, due on a tab, a dot for presence beside a name. Three emphasis roles, brand, accent and soft, plus the shared status ladder of positive, info, attention, critical and neutral. To pin a count to the corner of another element, use sui-overlay-badge.
import { Component } from "@angular/core";
import { SuiBadge } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiBadge],
template: `<sui-badge value="12"></sui-badge>`,
})
export class Example { }
Basic
The badge is a plain span with no role, so the count is read as text where it sits. Put the meaning in the label beside it, as in "Unread 12", and never leave the number to stand alone.
Three emphasis roles (brand, accent, soft) and the shared status ladder (positive, info, attention, critical, neutral); an unknown severity falls back to brand. Brand mode shows no green or red, so positive and info sit on the brand hue and attention and critical on the accent; semantic mode adds green, gold and rose.
sm is 16px with 10px text, md is 19px with 11px text. The 8px dot announces nothing, so name the element it marks for the change. Shape follows severity, so state reads without hue: positive a filled disc, info a hollow ring, attention a ring with a center point, critical a disc with a halo, neutral a rounded square.
Numbers use tabular numerals, so counts stay aligned in a column.
Presence dot (8px) instead of a pill; value is not rendered. The dot paints the severity's solid color, not its soft wash, because a tint disc on the surface reads as nothing, and its shape follows the severity so the state reads without hue: positive a filled disc, info a hollow ring, attention a ring with a center point, critical a disc with a halo, neutral a rounded square.
Color role: brand, accent, soft (brand on brand-soft) or the status ladder, painted from the same status tokens as the tag and the message band. Unknown values fall back to brand.
Count or short text shown in the pill, in tabular numerals. Ignored in dot mode.
Types
SuiBadgeSeveritytypeThe shared status ladder plus the three emphasis roles a count badge also needs.
No members.
SuiSeveritytype
No members.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.