# 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.

Kit part · With the Kit · https://tactileui.dev/parts/notifications

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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.

## Related parts

- [Popover](https://tactileui.dev/parts/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.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.