Popover
A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
Kit parts
Notifications
A key with a counter window in its cap, and a card of messages hung from it. Each unread message has its lamp lit; reading it puts the lamp out and the counter steps down.
Seats open in 11 days. Want one email that morning?
Anatomy
How it is built, line by line, comes with its code and styling.
Variants
- Counter key · 3 unread
- Counter key · nothing new
- Icon key with a lamp
- Unread and read
States
- Nothing unread
- Unread
- Card out
- Focus
Props and options
| Name | Kind | Description |
|---|---|---|
| data-label | attribute | The first words of its aria-label; the count is added after. “Notifications” by default. |
| data-notifications-read-all | attribute | Reads them all. |
| data-notifications-status | attribute | Rewritten as “3 unread” or “All read”. Put it in a polite live region. |
| updateNotifications(card) · markNotificationsRead(card, items?) | function | Recount after adding or removing messages; read some or all of them. |
| Enter · Space · Escape · Tab | keyboard | Open and close from the key; Tab walks the messages’ keys; Escape returns to the key. |
Usage notes
Open the card. Press a key inside a message to read it, or Mark all read: the lamps go out top to bottom and the counter steps down.
Accessibility
- Unread is a lamp and a bold title, never the lamp alone.
- Opening the card reads nothing: a message is read when one of its keys is pressed, or with Mark all read.
- Reduced motion puts the lamps out together.
- Keyboard: the key is a native button, so Enter or Space opens the card and Escape closes it, with focus back on the key. Mark all read and the keys inside a message are buttons in the tab order.
