Counter Badge

Used to add a count to an associated item.

Stable
Show details
Stable
Published: October 28, 2025
Updated: October 28, 2025

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

counterbadge-anatomy

Element

Description

Optional?

1. Label

Provides the number of associated items. Consists of digits only.

No


Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

CounterBadge
Property Values Default
type Variant solid | outlined solid
✏️ counterValue Text string 12
CounterBadge
CounterBadge
type outlined
CounterBadge
CounterBadge
type solid

Help and support