Modal

Dialog shell with the accessibility floor built in: focus trap, ESC, scroll lock, aria-modal and focus returned to the trigger.

When to use it

The content has to cover the screen and demand a decision before anything else can happen.
A longer edit of a record — where there is explaining to do, the dialog gives both room and focus. A quick edit of a few fields next to a list stays in IngotDrawer.
The dialog is more than "confirm / cancel" — it holds a form, a preview or a selection.
Any time you would otherwise write <div className="fixed inset-0 …"> again. A dialog should be exactly one thing, not as many things as there are screens — and this primitive is that one thing.

You are confirming a destructive step. That is IngotConfirm, which is built on top of this primitive and adds the buttons and the veto.
The message blocks nobody ("saved", "that did not work"). A dialog is the heaviest affordance you have; a message where the action happened is enough.
The content is long enough that it only scrolls inside the panel. Then it is a screen, not a dialog.

title: ReactNode — Rendered into the h2 heading that aria-labelledby points at.
onClose: () => void — Called by ESC, a backdrop click and the close button.
children: ReactNode — The panel body.
closeLabel: string — Translated aria-label for the close icon — the Ingot has no translations of its own.
width: number — Maximum panel width in px. Defaults to 480.
testId: string — data-testid of the overlay; the panel gets `${testId}-panel`.