Saving and unsaved changes
What saves instantly, what needs Save, and leaving with unsaved work.
Choices save the moment you make them; typed text saves when you press Save. Either way, the person sees that it worked, or that it didn't.
The problem
People change things all over Bridge: a switch in Settings, the Light or Dark choice, a contact's bio. If some changes save at once and others quietly need a button, nobody knows whether a change stuck. And if an instant change fails without a word, the switch shows something that isn't true.
What to do
- Choices save at once. A switch, a choice or a tag applies the moment it's made, with a small confirmation. No Save button.
- Typed text waits for Save. Names, bios and comments have a Save button that names what it saves. While it works, the button shows its spinner and can't be pressed twice.
- A failed save never pretends. If an instant change fails, the control goes back to how it was and the message says so, next to it: "Couldn't save. Try again."
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| A setting that's on or off | Switch. It saves when flipped, then confirms with an inline "Saved" or a toast | Settings → Notifications → Feedback request emails |
| One of two to five modes | SegmentedControl. It applies at once | Appearance: Light / Dark |
| Typed text: a name, a bio, a comment | A Save button that names the change. Spinner while it saves | Edit contact → Save changes |
| An instant change fails | Put the control back and say so next to it | The switch flips back: "Couldn't save. Try again." |
| Someone leaves with typed text unsaved | Approved, not built yet: ask first with ConfirmDialog | Discard your changes? |
See it work
Live examples built from the package on the sample network. Click through them.
A switch saves the moment it's flipped
Flip either switch. It saves straight away (the switches pause while it does), then "Saved" shows in the card.
Notifications
Feedback request emails
Get asked how an intro went after you make one.
Weekly network digest
A weekly summary of activity and opportunities across your network.
If it fails, it goes back and says so
This one is set to fail. The switch flips, then returns to where it was, and the message stays until the next try.
Global network sharing
Share with everyone in my contacts
Shares your network with all the contacts in your address book.
Typed text waits for Save
Edit the bio and press Save changes. The button spins while it saves, then says "Saved". Typing again brings the button back.
Leah Okonkwo: bio
What to write
| Part | Rule | Example |
|---|---|---|
| Save button | Name what it saves. Never Submit or OK. | Save changes |
| After saving | Past tense, one word, next to the thing that saved. | Saved |
| Failed | "Couldn't save." plus what to do. Never a raw error message. | Couldn't save. Try again. |
| Setting label | Describe the setting when it's on, not the action. | Feedback request emails |
| Setting help | One line under the label: what the person gets. | Get asked how an intro went after you make one. |
Approved, not built yet
- Leaving with unsaved typed text: ask "Discard your changes?" with Keep editing / Discard, using ConfirmDialog.
Accessibility
- Every switch has a name:
aria-labelledbypointing at its visible label. - While a Save button works it's disabled and sets
aria-busy, so it can't be pressed twice. - "Saved" and "Couldn't save" appear in a live region, so they're read out without moving focus.
- The switch's position and its label carry the meaning, not the blue alone.
| Keys | What happens |
|---|---|
| Space / Enter | Flips a switch, or presses Save changes. |
| ← → | Moves between the options of a SegmentedControl. |
| Tab | Moves to the next control. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| Switch | An on/off setting that saves the moment it's flipped. |
| SegmentedControl | A choice between a few modes that applies at once. |
| TagInput | Tags that apply as they're added or removed. |
| Button | Save for typed text: primary, named for the change, with loading while it saves. |
| Toast | The small confirmation when the change isn't otherwise visible. |
| ConfirmDialog | Approved, not built yet: asks before leaving unsaved typed text. |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- Inside a dialog that saves with one button, should tags and switches still save at once? Bridge OS's Edit ICP dialog holds its tags and its "Show on my public profile" switch until Save ICP, while the Switch page says to use a checkbox in a form that saves with a button.
- Inline "Saved" or a toast after an instant change: the rule allows either. A default for each kind of screen isn't decided.
Where Bridge OS differs today
Follow this page, not the gap.
- Settings → Notifications switches show no confirmation when they save (
profile-tab.tsx). - The global network-sharing switch goes back silently when its save fails; it should say so (
overview-tab.tsx). - Edit contact and Edit ICP show the server's raw message when a save fails ("Failed to save"), not "Couldn't save. Try again." (
edit-contact-modal.tsx,profile-tab.tsx).
Sources
- Decision 2026-11-02
- Decision 2026-11-02; components.md → Button loading
- ux-copywriter skill → Error messages
- Bridge OS
profile-tab.tsx(NotificationPreferencesSection: optimistic flip, revert,disabled={saving});overview-tab.tsx(global sharing toggle reverts) - Bridge OS
profile-tab.tsx(NotificationPreferencesSection error line) - Bridge OS
edit-contact-modal.tsx(saveState "saved") - Switch page → Accessibility, Content
- accessibility-specialist skill → Live regions
- Proposals approved by Aman 2026-11-02.