Badge

The badge component enables users to categorize content effectively and uniformly across their interfaces. It offers a quick overview of a category or status and is frequently used to display numerical or status data.

Props

NameTypeDescriptionDefault
labelstring | numberText to be placed in the badge.-
mode'contextual' | 'notification'The available badge modes.'contextual'
notificationLimitnumberIn notification mode, if the number entered as label is greater that this notification limit, +notificationLimit will be shown. If not, the entered text will be shown as label.99
titlestringText representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.-
color'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'Affects the visual style of the badge. It can be used following semantic purposes or not.'grey'
iconstring | (React.ReactNode & React.SVGProps <SVGSVGElement>)Material Symbol name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols, replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol name with "filled_".-
size'small' | 'medium' | 'large'Size of the component.'medium'

Examples

Contextual

Notification

Icons