Notification · Smallest

Playground

The bell opens the tray in product context. Type is the top-left menu; unread count is 1 / 12 / 99+. 99+ is the pill cap, the list still shows at most 12. Replay the pill appear.

Neowise Money

Models

Agents

Home3

Agents

Configure

Knowledge Base

Voices

Integrations

Deploy

Audience

Campaigns

Phone Numbers

Monitor

Analytics

Conversations

Evaluations

Developer

Usage

API keys

Webhooks

Credits$45,092

Devansh

Item

Status cells lead with an icon and date, then title and description. Avatar cells keep author, time, and source.

Tray

Isolated tray chrome. One item hugs; twelve fill to the max height and scroll. Overflow holds Settings and Clear all.

Notifications

Empty

Day 0 is an org that has never received a notification. Caught up is an empty tray after clearing.

Notifications

No notifications yet

Alerts about your workspace will show up here.

Best practices

When to use

Use for workspace alerts people can review later: webhooks, credits, billing, and similar system events.
Use Toast for a brief confirmation of an action that just happened, and Dialog when a decision is required now.

Behavior

Open the tray from the bell. The count pill is unread items, capped at 99+.
The pill slides out of the bell and pops on appear, then scales out when unread hits zero. Wider counts (12, 99+) sit farther right so they nick the corner instead of covering the icon.
Overflow holds Settings and Clear all. Opening an item marks it read.

Content

Status cells lead with a 16px icon and a date, then a title and wrapping description. Identity cells lead with the author, a relative time, and an optional source.
Day 0 (never received) is “No notifications yet.” An emptied tray is “You’re all caught up.”

Accessibility

Name the bell with the unread count. Name the overflow control; Settings and Clear all live in the menu.