Variants
Omit value for a 6dp dot; pass a string for a 16dp pill that grows
with content. Caller is responsible for clamping (the component does not interpret the value).
dot
"1"
"8"
"42"
"999+"
Colors
MD3 strongly recommends the default Error role; primary and tertiary
are exposed for non-alert accents. Custom colors must clear 3:1 contrast against their host.
error · default
primary
tertiary
Hosts
Robusta components that anchor a badge via slot="badge": icon-button (top-right of
the icon), navigation-item (collapsed top-right of indicator, expanded trailing edge of row),
and any list-item via the trailing slot.
material-icon-button
material-navigation-item · expanded
material-list-item · trailing slot
Sample usage
<!-- Small dot — unread indicator -->
<material-icon-button icon="mail" aria-label="Mail, new">
<material-badge slot="badge"></material-badge>
</material-icon-button>
<!-- Large pill — count, with caller-clamped value -->
<material-icon-button icon="chat" aria-label="Chats, 12 unread">
<material-badge slot="badge" value="12"></material-badge>
</material-icon-button>
<!-- 4-char overflow — caller passes the final string -->
<material-icon-button icon="campaign" aria-label="Campaigns, 999+">
<material-badge slot="badge" value="999+"></material-badge>
</material-icon-button>
<!-- Color: error (default) | primary | tertiary -->
<material-badge color="primary" value="3"></material-badge>
<!-- Navigation item — already exposes slot="badge" -->
<material-navigation-item icon="inbox" label="Inbox" aria-label="Inbox, 8 unread">
<material-badge slot="badge" value="8"></material-badge>
</material-navigation-item>
<!-- Ad-hoc on a custom icon — wrap in a positioned ancestor -->
<span class="relative inline-flex">
<span class="material-symbols">mail</span>
<span class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2">
<material-badge value="3"></material-badge>
</span>
</span>