Navigation

NotificationCenter

The bell at the top of the app: how many things need a look, and a panel listing them, grouped, each a link to where it's resolved.

Preview

Props

Guidelines

The bell at the top of the app: how many things need a look, and a panel listing them, grouped, each a link to where it's resolved. A popover beside the bell on desktop; a bottom sheet on phones.

Provide: items ({ id, group, icon, tone, title, detail, href, action }), the ids already read, and onRead(ids). Optional groups (their order, such as Today, Late, Money, Team and billing), onSelect(item) to open items without a page load, size (L on phones), floating (a glass circle the size of the account button, for the top right of the app on desktop) and label.

• Items are worked out from what is true now (a late project, an overdue invoice, a contract out for signature, an invite not accepted, the end of a trial, a failed payment), not sent as messages. When the thing is resolved, it leaves the list on its own.
• Give each item an id that carries the date or state it is about, so it shows as new again if it comes back.
• Opening an item marks it read; Mark all as read clears the count. Read state is per person.
• The count is red only when something unread is late or overdue (tone: 'negative'), and the accent otherwise. Unread rows are bold with a small filled circle and "New" for screen readers, so it never rests on color.
• Copy is warm and plain: say what happened and when ("Publish date was Oct 18"), and what opening it is for ("Pick a new date"). Never scold.
• The panel is on the navigation glass, like menus.