Content
- Title says what you're doing: "Add a network", "Edit Saltmarsh Partners".
ExperimentalorganismOverlays
Dialog
A centered dialog for creating or editing a small record. For "are you sure?", use ConfirmDialog.
import { … } from "@brdgapp/ui/components/dialog"Usage
Dialog is a centered window for creating or editing a small record — adding a network, editing a contact — without leaving the page. It has a title, a short form and a footer with the actions. It is not for "are you sure?" questions: that's ConfirmDialog.
When to use
- Creating or editing a record that fits in a few fields.
- A short task that should keep the page underneath in place.
When not to use
- For confirming a destructive action. Use ConfirmDialog instead.
- For reading one item's details or a list. Use Drawer instead.
- For long forms or anything with steps. Give it its own page.
Anatomy
Add a network
A community or fund you belong to.
Network name
Lanternfield Founders
Drawn in place and smaller. The real dialog opens over the page.
Backdrop. Dims and blurs the page.
Panel. Up to 512px wide, raised surface, 16px corners, the dialog shadow. Scrolls inside if the form is tall.
Header. Title (16px Bold), an optional line under it, and a Close button.
Body. The form.
Footer. A destructive action alone on the left; Cancel and the primary action on the right.
Examples
Add a network
Leave the name empty and move on to see the error; Save runs a pretend request.
States
| State | What happens |
|---|---|
| Open | Focus moves into the dialog and stays there. |
| Busy | Saving: Close, Esc and the backdrop do nothing until it finishes. |
| Closed | Focus returns to what opened it. |
Behavior
- Built on Base UI Dialog.
- Esc, the Close button and a click on the backdrop close it, unless
busy. - Fields follow Forms and validation: errors on leaving a field and on Save; optional fields say "(optional)".
Do and don't
Do
Keep it to a few fields.Don't
Put a whole settings page in a dialog.Do
One primary button, named for the action (Save, Add).Don't
Two filled buttons in the footer.Accessibility
- The title names the dialog for screen readers; the description is linked to it.
- Every field has a visible label; errors are linked with
aria-describedby.
| Keys | Action |
|---|---|
| Tab | Moves through the form and stays inside the dialog. |
| Esc | Closes it (unless busy). |
API reference
Dialog
The dialog, built on Base UI Dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether it shows. |
onClose | () => void | — | Called on Close, Esc or the backdrop (not while busy). |
title | string | — | What it does. |
description | ReactNode | — | One line under the title. |
children | ReactNode | — | The form. |
footer | ReactNode | — | The buttons, right-aligned: Cancel, then the primary action. A destructive action goes first with className="mr-auto", which puts it alone on the left. |
busy | boolean | false | Can't be dismissed. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- IconButton
- Used by components
- None
- Used in patterns
- Forms and validationCreating recordsPanes, rails and sheets
- Used in templates
- None
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- New in the package (approved 2026-11-02). Bridge OS's network-entry modal is hand-built and moves onto it.
Sources
- Bridge OS
network-entry-modal.tsx(shape, footer, busy lock). - Pattern: Creating records (proposal approved 2026-11-02).