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	Stable
Figma Documentation	Stable
Web Components	Planned
Vue [Fozzie]	N/A
React [Snacks]	Stable
iOS JustUI [UI Kit]	Pre-release
iOS PIE [SwiftUI]	Pre-release
Android PIE [Compose & Views]	Stable