Feedback and undo
Confirming that an action worked, and what happens if it didn't.
After an action, people see that it worked: in place when the result is where they're looking, with a toast when it happened out of sight. Errors say what to do next. Undo isn't offered yet.
The problem
When someone copies a link, sends an invite or starts a sync, they need to know it worked. If nothing changes, they press again or assume it failed. But a toast for every click is noise, and an error in a toast disappears before anyone can act on it.
What to do
- Show it where they're looking. If the result can show in place, that is the feedback: the row says "Copied", the button spins while it works.
- A toast only when it's out of sight. When the thing they clicked has gone (a menu closed) or the result happens elsewhere, a short toast says what happened, in the past tense.
- Errors stay. An error people must act on stays next to the problem; it isn't a toast that fades. Bridge has no undo, so anything that removes something asks first instead.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| Copying a value shown on the page | CopyField: the row itself turns into "Copied" | Leah Okonkwo's email on her profile |
| An action chosen from a menu, which then closes | A toast, because the menu is gone | Make intro ▾ → Copy intro link → "Intro link copied to clipboard" |
| A button whose work takes a moment | The button's spinner while it works; then the result in place | Connected accounts → Sync now |
| Work that carries on after the click | Say it started, in the card where it was started | Sync started. This can take a few minutes. |
| It failed | A message next to the thing, with what to do. It stays | Couldn't start the sync. Try again. |
| Removing or stopping something | No undo: ask first with ConfirmDialog (Destructive actions) | Stop sharing with Leah Okonkwo? |
See it work
Live examples built from the package on the sample network. Click through them.
In place: the row says Copied
Click the email or the phone number. The row confirms on its own, so there's no toast.
Leah Okonkwo
Partner, Saltmarsh Partners
Out of sight: a toast
Copy intro link closes the menu, so nothing on screen changes. The toast is the confirmation, for about 3 seconds.
Priya Natarajan
Co-founder & CEO, Quillbase
Started, or failed, in the card
Choose whether the sync works, then press Sync now. A started sync says so and clears; a failure stays until you try again.
Connected accounts
2 connected- ana@lanternfield.example
- ana.ruiz@mail.example
What to write
| Part | Rule | Example |
|---|---|---|
| In place | One word, past tense. | Copied |
| Toast | Past tense + object, under 10 words, sentence case, no full stop. No "successfully". | Invite sent |
| Started | Say it started and how long it may take. | Sync started. This can take a few minutes. |
| Error | "Couldn't …" + what to do. Never a raw error, "Oops" or a code. | Couldn't start the sync. Try again. |
| Never | Celebration or vague words. | Not "Success!" or "Something went wrong" |
Approved, not built yet
- Later: Undo in a toast for small reversible removals (a tag, a chip), which needs Toast to gain an action button.
Accessibility
- Toast sits in a polite live region: it's read out without moving focus.
- CopyField announces "Copied" to screen readers.
- A button that's working is disabled and sets
aria-busy, so it can't be pressed twice. - A message that appears in a card goes in a polite live region too.
- Success and failure are never color alone: each has an icon and words. A toast stays about 3 seconds, long enough to read a few words.
| Keys | What happens |
|---|---|
| Enter / Space | Copies, or presses the focused button. |
| ↑ ↓ | Moves between menu rows. |
| Esc | Closes the menu and returns to its button. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| CopyField | Copies an email or phone number and confirms in the row itself. |
| Toast | Confirms a result that happened out of sight, for about 3 seconds. |
| Button | Shows its spinner (loading) while the action runs. |
| ActionMenu | Where actions that close before their result shows usually live. |
| ConfirmDialog | Asks before removing something, since there's no undo. |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- When an action from a closed menu fails (Copy intro link), Bridge OS shows the error as a toast that goes away. Errors are meant to stay, but there's nothing left on screen to put it next to. Not decided.
Where Bridge OS differs today
Follow this page, not the gap.
- The Connected accounts sync message clears itself after 6 seconds, even when it's an error (
connected-accounts-section.tsx). Errors should stay until the person acts. - The Sync now check icon is hard-coded
#0EA02E; it should use the success token (connected-accounts-section.tsx).
Sources
- components.md → CopyField, Button
- ux-copywriter skill → Notifications & toasts
- ux-copywriter skill → Notifications (errors persist)
- Decision 2026-11-02
- Bridge OS
profile-intro-actions.tsx(Copy intro link → Toast) - Bridge OS
invited-modal.tsx - Bridge OS
connected-accounts-section.tsx(Sync now) - Bridge OS
connected-accounts-section.tsx,ai-apps-section.tsx; ux-copywriter skill → Error messages - accessibility-specialist skill → Live regions
- Destructive actions pattern; Decision 2026-11-02
- Proposals approved by Aman 2026-11-02.