Livia mentioned you2mUnread
Can you review the new empty state before we ship the dashboard?
Everything that happened while you were away
Toast interrupts, this accumulates. A header with the unread count and a mark all read control, optional filter tabs with counts, and a scrolling list of notification items with their own actions. Filtering stays with you: swap the children when the tab changes.
A working inbox
The tabs filter, the counts follow the data, and mark all read clears the dots. Unread items carry an emphasised title and an info coloured dot, never the action teal.
Notifications2 unread
Workspace backup is ready18mUnread
The nightly backup finished and is ready to download.
You joined the design project1h
Maria added you as an editor, so every file is now open to you.
Preview deployment failedSat
The build stopped while validating the application routes.
Items
An item takes a Material Symbol name or any element as its leading visual, a right aligned time, supporting copy, and a row of compact buttons when the notification can be acted on.
Item anatomy
Deployment finished2mUnread
The site is live on production.
Ann requested your reviewMon
The pull request updates the notification preferences flow.
Security check completedSun
No exposed credentials or vulnerable dependencies were found.
Empty
With nothing to show, the built in empty state keeps the panel from reading as broken. Pass your own through the emptyState prop when the moment needs different words.
Notifications
Nothing new
Notifications will collect here as they arrive.