Live demo — this example is server-driven; run the showcase locally for the interactive version.

Notification badge

A bell-icon button with a count overlay — the masthead trigger for the Notification drawer. Three states: read (muted), unread (highlighted), attention (red).

Examples

Read

No outstanding notifications — muted bell icon.

Unread

Pending count overlaid on the bell.

Attention

Critical state — red tinted with an exclamation marker.

With animation

Adding a notification pulses the badge icon; the animation runs once per new notification.

Documentation

Notification badge props

Parameters accepted by {#include components/feedback/notification-badge ... /}. Model mode: pass notificationBadge=<NotificationBadge> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`variant`	`read \| unread \| attention`	State. Default `read`.
`count`	String	Number overlaid on the bell. Omit to show only the icon.
`ariaLabel`	String	Accessible name (e.g. "3 unread notifications").

Usage

Pair with a Drawer. Click toggles a Drawer whose panel renders the Notification drawer.

Edit notification-badge.html on GitHub