ExperimentalatomFeedback

Toast

A short confirmation that drops in under the top navigation.

import { … } from "@brdgapp/ui/components/toast"

Usage

Toast is a short confirmation pill that drops in under the top navigation, such as "Profile link copied", then goes away. Mount one <Toaster /> in the app layout and call toast.success("Profile link copied") from anywhere. The usual mistake is putting something people must act on into a toast: it disappears.

When to use

Confirming an action that happened out of sight: copied, saved, sent.

When not to use

For an error people must fix. Show it where the problem is.
For a lasting, page-wide message. Use PageBanner instead.
For a result that already shows where the person is looking ("Copied" inside the row they clicked).

Anatomy

Pill. Raised surface, 1px border, the menu shadow, centered 72px from the top (just under the nav).
Icon. A green check, or a red alert for error.
Message. 13px SemiBold, one short line.

Examples

Success

Appears at the top of the window, under the navigation.

Error

States

State	What happens
Shown	Drops into place and stays 3 seconds; the timer pauses while the pointer is on it or it has focus.
Several	Up to 3 stack under the nav; older ones leave first.
Hidden	Fades out, or swiped up to dismiss.

Behavior

Built on Base UI Toast: a queue, a 3-second timer that pauses on hover and focus, swipe up to dismiss, and screen-reader announcements.
toast.success(message) and toast.error(message) work from anywhere, even outside React, once <Toaster /> is mounted. Errors are announced as more urgent.
<Toast open message /> is the Bridge OS way, kept so existing screens work. It's deprecated: new code uses toast; it's removed in 2.0.
Rendered at the end of the page, so a glass card can't trap it.
Sits above everything (z 100), because a confirmation hidden behind what you acted on is useless.

Do and don't

Say what happened, in the past tense: "Profile link copied".

Don't

Write "Success!" or a sentence with a question.

Content

Past tense + object, under 10 words, sentence case, no full stop, no "successfully". Errors start with "Couldn't".

Accessibility

Keep it on screen long enough to read: about 3 seconds for a few words.

API reference

Toaster

Where toasts appear. Mount once in the app's root layout.

Prop	Type	Default	Description
`timeout`	`number`	`3000`	How long each toast stays, in milliseconds.

toast

Shows a toast from anywhere.

Prop	Type	Default	Description
`toast.success(message)`	`(message: string) => string`	—	A past-tense confirmation. Returns the toast's id.
`toast.error(message)`	`(message: string) => string`	—	Something that failed out of sight. Returns the toast's id.
`toast.close(id?)`	`(id?: string) => void`	—	Hides one toast, or all of them.