Foundations · Surfaces
A centred, focus-trapping dialog that demands the user's full attention before they continue — a confirmation or a short form. It rides the modal elevation on the surface-4 overlay floor, over a dimmed, blurred scrim. Structure is head (title + description) · scrollable body · right-aligned foot — the primary + ghost action pairing.
Dana Whitfield · dana.w@example.org
This emails Dana a single-use magic link to join the Northside Foster Circle. They'll show as Pending on the roster until they accept, and the link expires in 7 days.
Send invite is pinned :hover to show the accent-hover state; hover either button (or tab in) for the live hover / focus ring. Esc or a backdrop press also dismisses.
elevation="modal" on the overlay tone (surface-4, #272d3b) — the highest surface tier, floated above the page floor so it reads as the top layer..overlay-backdrop — var(--scrim) at 62% with a 2px blur + slight saturate. It dims the app behind and captures the outside click that dismisses the dialog.--radius-xl (12px); width is min(520px, 92vw) and the panel caps at ~88vh with the body scrolling — the head and foot stay pinned.24px gutters (title = 18px semibold, description muted) · body 0 24px, scrollable · foot 16 24 24, gap 12, right-aligned. Keep one title so aria-labelledby resolves.danger). The primary is the affirmative, always last.onOpenChange(false).