Homecomponentsinformational

Badge

A small numerical value or status descriptor for UI elements.

Use Badge to display a count of a dot near a primary element as a highlight. It can be used standalone, or with a primary element where the badge would be automatically placed at its top-right corner.

42
Open in Playroom

Count

Use the count property to set the count value. Use the accompaying overflowCount property to set the max count number.

1
99+
Open in Playroom

Dot

Use the dot property to display just a dot instead of a count. An accompaying color property can be used to change the color.

API

dot
Displays a dot element.
true
false
color
Color of the dot.
online
offline
unread
count
Count number to show instead of the dot.
number
overflowCount
Maximum count to show.
number
children
The element to put the badge on.
ReactNode
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
Count
Dot
API