Indicator

Indicator

A count, a status dot or a spinner on the corner of any element, such as a button, an icon or a card.

A count

Wrap the element in .indicator and add a span with data-count after it. It sits on the top right corner. Put the number in the element's aria-label too, because a screen reader reads the label of the button, not the count next to it.

3 12 99+

A status dot

Add a span with data-status (ok, warning, danger or info; neutral without a value). It sits on the bottom right corner. The dot is only colour, so give it role="img" and an aria-label that names the status.

Live

Add data-pulse to a dot for something that is happening now: a ring spreads from the dot and fades. It stops when the reader has asked for reduced motion, so name the state in the aria-label as well, such as "Live now".

A loader

Put a Loader after the element to show that it is working, such as a sync or a save. It sits on the bottom right corner. Give it role="status" and an aria-label that says what is happening.

Sizes

Set data-size on .indicator: sm or lg make the count and the dot smaller or larger. Without it they are medium.

4 4 4

Colour and position

Put data-position on the mark to move it to top-left, top-right, bottom-left or bottom-right. A count takes data-variant for the colour of a status. For a person's photo or initials, the Avatar has its own count and dot.

Order #1043
2
Order #1044
Order #1045
New

Attributes

Attribute / element Values Description
.indicator span Wraps the element and the mark. The mark is positioned on its corner.
data-size sm lg On .indicator: the size of the count and the dot
data-count on a child span A number or short text on the top right corner
data-status ok warning danger info A dot on the bottom right corner. Neutral when empty. Add role="img" and an aria-label.
data-pulse on a dot A soft ring that spreads from the dot, for "live". Off under reduced motion.
.loader on a child span A spinner on the bottom right corner. Add role="status" and an aria-label.
data-variant ok warning danger info On a count: its colour
data-position top-left top-right bottom-left bottom-right On the mark: which corner it sits on