Modal

Stack-based modal system with a programmatic API. Includes built-in confirm, prompt, and alert dialogs, or pass your own Svelte component to open().

import { useModalManagerAPI, Modal } from 'phoundry-ui';

Confirm Dialog

Show code

const manager = useModalManagerAPI();

const confirmed = await manager.confirm({
  title: 'Delete Item',
  message: 'Are you sure? This cannot be undone.',
  confirmLabel: 'Delete',
  danger: true,
});

Prompt Dialog

Show code

const result = await manager.prompt({
  title: 'Rename File',
  message: 'Enter a new name:',
  defaultValue: 'untitled.txt',
});

Alert Dialog

Show code

await manager.alert({
  title: 'Update Complete',
  message: 'Your settings have been saved.',
});

Custom modal

Show code

const choice = await manager.open(
  ExampleCustomModal,
  { projectName: 'Northwind' },
  { closeOnBackdrop: false, icon: 'mdi:folder-outline' }
);

Modal Props

Prop	Type	Default	Description
title required	string	—	Modal title displayed in the header.
onClose required	() => void	—	Called when the modal should close (escape, backdrop, close button).
closeOnBackdrop	boolean	true	Allow closing by clicking the backdrop overlay.
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Named size controlling max-width (sm=400, md=560, lg=720, xl=960, full=100%).
noTitle	boolean	false	Hide the title bar for custom header layouts.
icon	string	—	Iconify icon id shown before the title. Ignored when noTitle is true.
iconColor	string	text-txt-tertiary	Tailwind text color class for the leading icon when unset in props.
children required	Snippet	—	Modal body content.

Confirm Options

Prop	Type	Default	Description
title required	string	—	Dialog heading.
message required	string	—	Dialog body text.
confirmLabel	string	'Confirm'	Label for the confirm button.
cancelLabel	string	'Cancel'	Label for the cancel button.
danger	boolean	false	Use danger variant for the confirm button.
icon	string	—	Iconify id for a leading icon.

Prompt Options

Prop	Type	Default	Description
title required	string	—	Dialog heading.
message	string	—	Optional help text above the field.
defaultValue	string	''	Initial value for the input.
placeholder	string	''	Input placeholder text.
confirmLabel	string	'OK'	Label for the submit button.

Alert Options

Prop	Type	Default	Description
title required	string	—	Dialog heading.
message required	string	—	Dialog body text.
confirmLabel	string	'OK'	Label for the single action button.
icon	string	carbon:information-filled	Iconify id; defaults to an information icon if omitted.

Usage tips

Call setupOverlays() once in your root layout to initialize all overlay managers together, including the modal stack and ModalOverlay.
Use useModalManagerAPI() inside components (context-based) or getModalManager() from non-component code (global singleton).
manager.open(Component, props, options) returns a Promise that resolves when the modal closes, with the value passed to onClose(result).
Modals stack — opening a second modal layers it on top. manager.closeAll() dismisses the entire stack.