Notifications and status

import"@truvar-ai/design-system"

Notifications and status

Tell people what happened, in plain words, at the right volume: toasts for passing confirmations, banners for things that need attention, dialogs only when a decision is needed.

Toasts

Built on ToastQueue + ToastRegion

They stack at the bottom end, pause while hovered or focused, and are announced to screen readers. F6 jumps to them.

Notification centre

Built on DialogTrigger + Popover + GridList

The same component sits in the top bar. The count is announced with the button label.

Open the bell

Progress bar

Built on ProgressBar

Determinate when you know how much is left; indeterminate when you don't.

Uploading q3-contacts.csv0%

Matching duplicates

Searching

Meter

Built on Meter

A known amount within a range. It turns warning, then danger, and says so in words.

Seats used34 of 50

Storage81% · Getting full

AI credits92% · Almost out

Badges

Built on span

Short status labels. Always a word, never colour alone.

New leadQualifiedProposal sentNegotiationWonLost

Loading skeleton

Built on div (aria-hidden)

Shows the shape of what's coming. Pair it with a busy region so screen readers know.

Empty state

Built on div

An empty screen is an invitation to act.

No reports yet

Reports turn your CRM data into a weekly email your team will actually read.