Skip to main content

Badge

A badge is a small graphical element used to display a numeric value or count.

Overview

The purpose of badges is to quickly draw attention to specific numeric values associated with an element, enhancing usability and visual communication within the user interface.

Badges are commonly used to provide numeric visual cues, such as displaying a count. They are frequently placed adjacent to the item they represent.

A badge placed on the top right of an Icon button.

Resources

Stable
Stable
Web Components
Planned
Vue [Fozzie]
N/A
Stable
iOS JustUI [UI Kit]
Pre-release
iOS PIE [SwiftUI]
Pre-release
Android PIE [Compose & Views]
Stable