Badges
Badges (COMPONENT_SPEC §34, Compose Badge in a BadgedBox) show dynamic information on an icon: a small 6dp dot, or a large 16dp pill with a count or up to four characters, in the error color. A badged box keeps the anchor's size and puts the dot 6dp inside its top-end corner, or the large badge 12dp before its end and 2dp above its top; both mirror in right-to-left text. Badges appear and disappear without motion, as in Compose. CSS draws them; m3e-react's <Badge count max> writes counts above max (999) as 999+. There is no custom element: the navigation components render the badge contract themselves.
The badge holds visually hidden text that is read with the item it sits in ("Inbox, 8"): "New notification" for the dot, the count for a large badge, or your own words. The visible digits are hidden from assistive technology. Name the item from its content (an icon with a label, visible text), not with aria-label, which replaces the content and the badge with it.
Small and large (CSS only)
On an icon (badged box)
.m3e-badged-box around the anchor, the .m3e-badge after it (the Compose samples: a 24dp icon in a navigation bar item).
In a button
The button is named from its content: the icon's label, then the badge ("Chat, New notification"; "Notifications, 3 unread").
React
<BadgedBox badge={<Badge count={n} />}> around the anchor. <Badge /> is the dot; count (with max, 999 by default) or short children make the large badge; label replaces the hidden text ("" leaves it out). <IconButton> asks for aria-label or aria-labelledby: point aria-labelledby at the icon and the badge, so the badge stays in the name.
Navigation
Navigation bar, rail and suite destinations and tabs build the badge in: set badge on the item (bars, rails, suite, tabs). The navigation drawer's badge stays trailing text in the label color, as Compose's NavigationDrawerItem draws it.
Sources
androidx Compose Material3 1.5.0-beta01 (19991f2c): BadgeTokens.kt (the 6dp dot, the 16dp large badge, full corners, error and on-error, label small) as read by Badge.kt (Badge L151–189, BadgeDefaults.containerColor L192–196) and the literals Compose renders there (the 4dp padding L201–202, the BadgedBox offsets 12 / 14 / 6dp L208–218) in components/badge-defaults.css (lines in PARITY.md); BadgeSamples.kt for the "New notification" label and the "8" / "999+" counts; the navigation items keep the badge inside them with badgeBounds() (NavigationItem.kt L571, L624).
m3.material.io Badges: at most four characters, "+" over 999 (owner decision M9 #6). SOURCES register #51.