dialogService is for simple text-only dialogs
Themessage property only accepts a plain string rendered as a <Paragraph>.
For complex body content — forms, formatted text, grids, tables, or any Svelte components — use a <Modal> component directly instead. See the Modals page for examples.Basic Usage
All dialog functions return Promises, so you can use async/await for clean, synchronous-looking code:
// Confirm dialog
const confirmed = await dialogService.confirm({
title: 'Delete Item?',
message: 'This action cannot be undone.',
variant: 'danger'
});
if (confirmed) {
// User clicked OK
}
// Alert dialog
await dialogService.alert({
title: 'Success!',
message: 'Your changes have been saved.',
variant: 'success'
});
// Prompt dialog
const name = await dialogService.prompt({
title: 'Enter Name',
message: 'Please enter your name:',
defaultValue: 'John Doe'
});
if (name !== null) {
console.log('User entered:', name);
}Confirm Dialogs
Two-button dialogs that return true (confirmed) or false (cancelled).
Outcome → Toast (banded + forced choice)
The svelte counterpart of keen's server-driven dialog: await the promise, then raise a toast for the outcome. isBanded is newly supported by dialogService, and closeOnBackdrop: false now actually sticks (the backdrop
no longer dismisses; Escape still cancels — matching core's modal-dialogs.js).
// svelte idiom of keen's server-driven dialog: await + toast.
const reload = await dialogService.confirm({
title: 'Document changed',
message: 'Someone else updated this document. Reload their version?',
variant: 'warning', isBanded: true, placement: 'top', // isBanded: new
confirmText: 'Reload theirs', cancelText: 'Keep mine'
});
reload
? toastService.show({ variant: 'warning', titleText: 'Document reloaded', messageText: '…' })
: toastService.show({ variant: 'success', titleText: 'Kept your version', messageText: '…' });
// Forced choice: closeOnBackdrop:false now sticks (Escape still cancels).
await dialogService.confirm({ closeOnBackdrop: false, confirmText: 'Yes', cancelText: 'No' });Position Options
Dialogs can be positioned in the center (default) or at the top of the viewport.
// Centred placement (default)
await dialogService.alert({
title: 'Centered',
message: 'This dialog is centered.',
placement: 'center' // default
});
// Top placement
await dialogService.prompt({
title: 'Top Position',
message: 'This dialog appears near the top.',
placement: 'top'
});Alert Dialogs
Single-button dialogs for notifications. Just wait for the user to acknowledge.
Prompt Dialogs
Text input dialogs that return the entered value (or null if cancelled).
Sequential Dialogs
Chain multiple dialogs together using async/await:
async function sequentialDialogs() {
const name = await dialogService.prompt({
title: 'Step 1 of 3',
message: 'Enter your name:'
});
if (name === null) return;
const email = await dialogService.prompt({
title: 'Step 2 of 3',
message: 'Enter your email:'
});
if (email === null) return;
const confirmed = await dialogService.confirm({
title: 'Step 3 of 3',
message: `Confirm: ${name} <${email}>`,
variant: 'success'
});
if (confirmed) {
await dialogService.alert({
title: 'Complete!',
message: 'Registration successful.',
variant: 'success'
});
}
}Custom Dialogs
Define your own buttons with typed return values using dialogService.custom().
// Custom dialog with typed return values
const result = await dialogService.custom<'save' | 'discard' | 'cancel'>({
title: 'Unsaved Changes',
message: 'You have unsaved changes.',
variant: 'warning',
dismissValue: 'cancel', // Returned on Escape/backdrop click
buttons: [
{ label: 'Cancel', value: 'cancel', variant: 'secondary' },
{ label: 'Discard', value: 'discard', variant: 'danger', isOutline: true },
{ label: 'Save', value: 'save', variant: 'success' }
]
});
switch (result) {
case 'save':
await saveDocument();
break;
case 'discard':
discardChanges();
break;
case 'cancel':
// User cancelled
break;
}API Reference
dialogService.confirm(options)
Returns Promise<boolean>
| Option | Type | Default | Description |
|---|---|---|---|
title | string | 'Confirm' | Dialog title |
message | string | 'Are you sure?' | Dialog message |
confirmText | string | 'OK' | Confirm button text |
cancelText | string | 'Cancel' | Cancel button text |
variant | string | 'primary' | Header theme: primary, success, warning, danger |
confirmVariant | string | (same as variant) | Confirm button style |
size | string | 'sm' | Modal size: sm, md, lg, xl |
placement | string | 'center' | Where the dialog sits: center, top |
closeOnBackdrop | boolean | true | Close when clicking outside |
dialogService.alert(options)
Returns Promise<void>
| Option | Type | Default | Description |
|---|---|---|---|
title | string | 'Alert' | Dialog title |
message | string | '' | Dialog message |
okText | string | 'OK' | Button text |
variant | string | 'primary' | Header and button theme |
size | string | 'sm' | Modal size |
placement | string | 'center' | Where the dialog sits: center, top |
dialogService.prompt(options)
Returns Promise<string | null>
| Option | Type | Default | Description |
|---|---|---|---|
title | string | 'Input' | Dialog title |
message | string | 'Enter value:' | Dialog message |
defaultValue | string | '' | Initial input value |
placeholder | string | '' | Input placeholder |
confirmText | string | 'OK' | Confirm button text |
cancelText | string | 'Cancel' | Cancel button text |
validator | function | null | Validation function: (value) => true | string |
variant | string | 'primary' | Header theme |
size | string | 'sm' | Modal size |
placement | string | 'center' | Where the dialog sits: center, top |
dialogService.custom<T>(options)
Returns Promise<T> - the value of the clicked button
| Option | Type | Default | Description |
|---|---|---|---|
title | string | 'Dialog' | Dialog title |
message | string | '' | Dialog message |
buttons | DialogButton[] | (required) | Array of button definitions |
dismissValue | T | undefined | Value returned on Escape/backdrop click |
variant | string | 'primary' | Header theme |
size | string | 'sm' | Modal size: sm, md, lg, xl |
placement | string | 'center' | Where the dialog sits: center, top |
class | string | '' | Additional modal class |
bodyClass | string | '' | Additional body class |
footerClass | string | '' | Additional footer class |
DialogButton<T>
Button definition for custom dialogs
| Property | Type | Default | Description |
|---|---|---|---|
label | string | (required) | Button text |
value | T | (required) | Value returned when clicked |
variant | string | 'secondary' | Button style variant |
outline | boolean | false | Use isOutline button style |
class | string | '' | Additional button class |
isDisabled | boolean | false | Disable the button |