Modal

Demo & usage

More examples

<sv-modal
  [(isOpen)]="open"
  variant="danger"
  title="Delete workspace"
  subtitle="This permanently removes all data"
  size="sm"
  (dismissed)="onClose($event)">
  <ng-container slot="body">Are you sure?</ng-container>
</sv-modal>

<sv-modal
  [(isOpen)]="open"
  position="bottom"
  variant="info"
  [backdropBlur]="true"
  title="Share">
  <ng-container slot="body">…</ng-container>
</sv-modal>

<sv-modal
  [(isOpen)]="open"
  [loading]="saving()"
  loadingText="Saving…"
  title="Edit profile">
  <ng-container slot="body">…</ng-container>
</sv-modal>

<!-- The backdrop is the whole screen around the panel and Escape is one
     key; both used to discard everything the user typed. [dirty] makes the
     dialog ASK instead — one prompt, from the same primitive the Drawer and
     Confirm Dialog use, so the three behave identically. A programmatic
     close() still closes: your own code has already decided. -->
<sv-modal
  [(isOpen)]="open"
  title="Edit profile"
  [dirty]="form.dirty"
  unsavedMessage="Your profile changes have not been saved."
  (discarded)="log('discarded via ' + $event)"
  (closeCancelled)="log('stayed')">
  <ng-container slot="body">…</ng-container>
</sv-modal>

// One line in the app, and every overlay stops outliving its page.
// Without it nothing changes — "a modal now closes on navigation" is a
// behaviour change, so the app asks for it rather than inheriting it.
bootstrapApplication(App, {
  providers: [provideRouter(routes), provideSvOverlayRouteClose()],
});

<!-- Off by default: Back closing a transient question eats a press the
     user meant for the page. Turn it on when the dialog is somewhere the
     user navigated TO — a details panel, a wizard step — and on a phone
     the system back gesture does the right thing too. The URL is
     untouched; this is a marked history entry, not a route. -->
<sv-modal [(isOpen)]="open" [backCloses]="true" title="Order details">
  <ng-container slot="body">…</ng-container>
</sv-modal>

// Return false to refuse, or nothing to have no opinion — so a guard
// that only cares about one path needs one if. A veto is silent: it does
// NOT show the unsaved-changes prompt, because you refused for your own
// reasons and own the messaging.
protected readonly notWhileUploading = (reason: ModalCloseReason) =>
  reason === 'backdrop' ? !this.uploading() : undefined;

<!-- Every close path is blocked while loading, which is right for a
     two-second save and wrong for a request that has hung. These say so
     explicitly: the overlay explains itself after 10s, offers a way out
     at 30s, and pendingDismissal="abort" lets the user leave — the modal
     emits (loadingCancelled) first, because the host started the work and
     is the only one who can stop it. -->
<sv-modal
  [(isOpen)]="open"
  [loading]="saving()"
  loadingText="Saving…"
  pendingDismissal="abort"
  [slowAfterMs]="10000"
  [stalledAfterMs]="30000"
  cancelLoadingLabel="Stop saving"
  (loadingCancelled)="abortSave()"
  title="Edit profile">
  <ng-container slot="body">…</ng-container>
</sv-modal>

When to use

• Interrupting the flow for a focused task or message that needs attention.
• Forms, details or confirmations that benefit from a focus trap.
• Semantic confirmations (delete, warning, success) — reach for the matching `variant`.
• For a yes/no decision specifically, the Confirm Dialog is more concise.

Async states

• loading

Outputs

Customization & theming

• Six semantic variants with icon badge + accent bar; toggle the badge via `showIcon`.
• Seven sizes (xs–2xl, full) and three positions (center, top, bottom-sheet).
• Backdrop blur, ESC/backdrop close toggles, and a spinner `loading` state.
• Rendered into `document.body` via a portal, so it always covers the full viewport and is never clipped by a parent `overflow` or `transform`.
• Scroll-locking with scrollbar-width compensation; `customClass` on the panel.
• Route and history integration: `[closeOnNavigation]` (default on) closes the dialog when the app navigates, once `provideSvOverlayRouteClose()` is wired; `[backCloses]` (default off) pushes a marked history entry so the browser Back button — and the phone back gesture — closes it, and pops that entry again on any other close so the history does not grow junk. Both compose with the unsaved-changes prompt: a navigation still asks before discarding.
• A controlled-close policy: `[dirty]` raises one shared unsaved-changes prompt (over the panel, focused on Keep editing) instead of discarding; `[canClose]` is your own veto, consulted before anything else and silent by design; `(discarded)` and `(closeCancelled)` report which way it went, and the eventual `(dismissed)` carries the reason the USER acted on rather than `programmatic`. Shared with Drawer and Confirm Dialog — `createCloseGuard` in `@styloviz/core`.
• A loading state with a way out: `pendingDismissal` (`block` · `abort`) decides whether the user may leave mid-flight, `[slowAfterMs]` / `[stalledAfterMs]` escalate the overlay from "taking longer than usual" to "seems to be stuck" (both timed from the moment `loading` goes true, not from when the modal opened), `cancelLoadingLabel` adds an in-overlay cancel once stuck, and `(loadingCancelled)` / `(loadingEscalated)` report it. Shared with the Spinner and Skeleton Loader — `createWaitEscalation` in `@styloviz/core`.

Best practices

• Do: Match the `variant` to the intent — `danger` for destructive actions, `success` for confirmations.
• Do: Use `[loading]` to block accidental dismissal while an async action is in flight.
• Do: Call `provideSvOverlayRouteClose()` once in your app (from `@styloviz/layout`). Without it a modal outlives its route and floats over an unrelated page — the most common overlay bug in shipped dashboards. Individual dialogs opt out with `[closeOnNavigation]="false"` when they belong to the shell rather than the page.
• Do: Set `[dirty]` on any dialog containing a form. The backdrop is the whole screen around the panel and Escape is one key — without it, a missed click discards everything the user typed, with no warning and no undo. The prompt, its copy and its focus behaviour are shared with the Drawer, so the two cannot drift.
• Do: Decide what happens when that request hangs. `pendingDismissal` states it: `block` (the default) refuses every close path as before; `abort` lets the user out and emits `(loadingCancelled)` first, so you can stop the work you started. Add `[slowAfterMs]` / `[stalledAfterMs]` and the overlay explains itself instead of spinning silently.
• Do: Restore focus to the trigger on close (handled) and label the dialog via `title`.
• Do: Keep modal content short; deep flows belong on a page or in a Drawer.
• Don't: Don't stack modals — close one before opening the next.

Accessibility

• `role="dialog"` + `aria-modal` live on the panel, labelled via `aria-labelledby` (title) and `aria-describedby` (subtitle).
• Focus is trapped while open and moved to `initialFocus` (or the first focusable element), then restored to the trigger on close — or, if the trigger is gone by then, to the nearest part of the page that outlived it. ⚠️ An `initialFocus` selector that matches nothing falls back to the first focusable element and warns in dev mode: the fallback looks like success, so nothing else would tell you the selector was never used.
• `opened`/`closed` fire for every transition; `dismissed` reports the reason (backdrop / escape / close-button / programmatic). `aria-busy` is set while loading.
• An escalation message is announced from the loading overlay's own `role="status"` region, which already exists when the text appears — one wait, one voice. Escape is not consumed while dismissal is refused: the modal has nothing to do with the keystroke, so it does not take it.