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.

Resources

Figma Component	Available
Figma Documentation	Available
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	Available
iOS JustUI [UI Kit]	Pre-release
iOS PIE [SwiftUI]	Pre-release
Android [XML views]	Planned
Android [Jetpack compose]	Planned