`<wa-badge>`

Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight notifications, categorize items, or flag new activity.

Category: Feedback
Built with: Lit
Library: Web Awesome
Author: Web Awesome
Package: @awesome.me/webawesome
Component size: 1.7 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 8.2 kB JS (shared by every Web Awesome component, loaded once per page)
Popular: 5 out of 5
Downloads: 364,100/week · jsDelivr 33,114,338 hits/month (whole @awesome.me/webawesome package)
GitHub stars: 1,348
Latest stable version: 3.14.0
License: MIT
Status: stable

Documentation
Demo
Source code

Attributes

variant
appearance
pill
attention
dir
lang
did-ssr

Slots

start
end

CSS Parts

base
badge
start
end