Badge Small count or label that appears on another element, often used to display notifications or status information.

CSS Source

Controls

Text Badge text should be as simple as possible and should NEVER exceed 1 line. It is highly recommended to line clamp the badge text to a single line.

Variant Background color, foreground color, and border color variants. "Current" takes the nearest parent's color style and uses it as the border as well as the text color.

Default Info Success Warning Danger Current

Shape Pill shape has full border radius and sharp shape has hard corner radius.

Default Pill Sharp

Properties Jump to heading

Class / Token	Type
`.prs-badge`	Component	Container
`.prs-badge-info`	Modifier	Aqua variant
`.prs-badge-success`	Modifier	Green variant
`.prs-badge-warning`	Modifier	warning variant
`.prs-badge-danger`	Modifier	Red variant
`.prs-badge-current`	Modifier	Border and text color is inherited
`.prs-badge-pill`	Modifier	Full radius
`.prs-badge-sharp`	Modifier	No radius