Creating records
Adding a new thing: a contact, an organization, an intro.
Small records (an organization in your network) are created in a centered dialog with a short form. Intros are made in the Intros app, which Bridge OS links to.
The problem
Adding something in Bridge, like a network on your profile, should be quick and shouldn't lose your place. A whole page for three fields breaks the flow. A form that can be closed halfway through saving leaves people unsure whether it saved. And intros aren't made in Bridge OS at all: they're made in the Intros app.
What to do
- Small records open in a dialog. A short form in a centered Dialog over the page you're on, with Cancel and Save. The same dialog edits the record later, with Delete on the left.
- Saving locks the dialog. While it saves, Save spins and nothing can close the dialog. Then it closes, and the new record is in the list.
- Start each thing where it lives. Make intro opens the Intros app in a new tab; an invite is sent from the row it's about.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| Add a record with a few fields | A secondary button with a plus on the card; it opens a Dialog | Your networks → Add network → "Add a network" |
| Change or remove that record later | The same Dialog, titled for editing; Delete on the left asks first | "Edit network" → Delete → "Delete this network?" |
| The list is still empty | The card stays and invites the first one | "Add your first network" |
| Make an intro | Primary split button: Make intro, plus a menu of the other ways | Make intro ▾ → Add a past intro, Copy intro link |
| Invite someone to share | The row's own button; no form | Invite to share → Invited |
See it work
Live examples built from the package on the sample network. Click through them.
Add a record in a dialog
Add network opens the dialog. Leave the name empty to see the error. Save spins and locks the dialog; then it closes and the network is in the list.
Your networks
Lanternfield Capital
Platform Lead
The same dialog edits and deletes
Edit opens the same form, filled in, with Delete on the left. Delete asks first. Delete both to see the card's empty state.
Your networks
Lanternfield Capital
Platform Lead
Juniper Row Ventures
Angel member
What to write
| Part | Rule | Example |
|---|---|---|
| Open button | The verb and the thing, with a plus icon. | Add network |
| Dialog title | What you're doing. | Add a network, Edit network |
| Labels | Short nouns. Optional fields say "(optional)". | Your role (optional) |
| Error | What to fix, under the field. | Network name is required |
| Footer | Cancel and Save on the right; Delete alone on the left when editing. | Delete · Cancel · Save |
| Delete confirmation | A question, then what it removes. | Delete this network? This removes Juniper Row Ventures from your profile. |
| Empty card | Invite the first one and say what it's for. | Add your first network |
| Split button menu | Each item a verb, with one line on what it does. | Add a past intro: Log an intro that already happened |
Accessibility
- The Dialog keeps focus inside while it's open and returns it to the button that opened it.
- Its title names it for screen readers.
- Every field has a visible label, and its error is linked to it (
aria-describedby). - While saving, Esc, Close and the backdrop do nothing, so the person always sees the result.
- The split button's caret has its own name ("More intro actions") and opens its menu with ↓.
| Keys | What happens |
|---|---|
| Tab | Moves through the form; focus stays in the dialog. |
| Esc | Closes the dialog without saving (not while it's saving). |
| Enter / Space / ↓ | On the split button's caret: opens the menu. |
| ↑ / ↓, then Enter | Moves through the menu and chooses. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| Dialog | Holds the add and edit form; can't be closed while saving. |
| Button | secondary with a plus to open the form; primary Save; danger-ghost Delete. |
| ConfirmDialog | Asks before Delete. |
| ButtonGroup | The Make intro split button. |
| ActionMenu | The split button's menu: Add a past intro, Copy intro link. |
| Toast | Confirms Copy intro link, which happens after the menu has closed. |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- Where focus starts when a form dialog opens. Bridge OS's network dialog puts it in the first field; the package Dialog has no option to choose.
Where Bridge OS differs today
Follow this page, not the gap.
- Bridge OS's form dialogs are still hand-built; they move onto the package's Dialog as Bridge OS adopts it.
- Bridge OS's form dialogs differ: the network dialog is 512px with a secondary Cancel, the edit-contact dialog is 448px with a ghost Cancel and "Save changes".
- The network dialog marks the required name with a red * and doesn't mark the optional fields "(optional)".
- The network dialog checks fields only on Save, not on leaving a field.
Sources
- Approved 2026-11-02; built as packages/ui/src/components/dialog.tsx
- Bridge OS
network-entry-modal.tsx - Bridge OS
profile-intro-actions.tsx,intro-app-links.ts - Bridge OS
invite-share.tsx - Bridge OS
profile-tab.tsx(NetworksCard) - Bridge OS
profile-intro-actions.tsx - Decision 2026-11-02 (Validation)