Quick Example

ConfirmDialog Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `confirm-dialog`

Code

                <script lang="ts">
 import { ConfirmDialog, confirmDialog, registerConfirmDialog } from 'sv5ui-plus';
 import { onMount } from 'svelte';

 let confirmDialogRef: { show: (options?: import('sv5ui-plus').ConfirmOptions) => Promise<boolean> };

 onMount(() => {
   registerConfirmDialog((options) => confirmDialogRef.show(options));
 });

 async function handleDelete() {
   const ok = await confirmDialog.delete();
   if (ok) console.log('Deleted');
 }
</script>

<button type="button" onclick={handleDelete}>Delete item</button>
<ConfirmDialog bind:this={confirmDialogRef} />

Confirm Dialog

Imperative confirmation dialogs with animated icons. Call confirmDialog.show() from anywhere after mounting <ConfirmDialog /> in your root layout. Pairs naturally with Toast and notify.

Setup

Register the singleton once in your root layout. This docs site already mounts ConfirmDialog globally, so the demos below work out of the box.

<!-- +layout.svelte -->
<script lang="ts">
  import { ConfirmDialog, registerConfirmDialog } from 'sv5ui-plus'
  import { onMount } from 'svelte'

  let confirmDialogRef

  onMount(() => {
    registerConfirmDialog((options) => confirmDialogRef.show(options))
  })
</script>

<ConfirmDialog bind:this={confirmDialogRef} />
{@render children()}

Use ConfirmDialog when…

You need yes/no or acknowledge flows
You call it imperatively from handlers or stores
You want animated icons and preset delete styling

Use Modal when…

You need custom body, forms, or multi-step content
You control open state declaratively with bind:open
You need fullscreen, scrollable, or slot-heavy layouts

Basic Usage

Icons & Alerts

Set icon to success, error, warning, info, or question. Use showCancel: false for single-button alerts.

Prompt Input

Pass inputPlaceholder to collect text. Optional inputChoices render quick-pick chips.

Non-dismissible

Set dismissible: false to disable Escape and backdrop dismiss — the user must choose an action.

With notify

After confirmation, show feedback with notify:

const ok = await confirmDialog.delete()
if (ok) notify.success('Deleted')

API Reference

confirmDialog methods

confirmDialog.show(options?)

Opens a confirmation dialog. Resolves to true when confirmed, false when cancelled.

confirmDialog.delete(options?)

Shorthand for destructive confirmations — warning icon, error confirm button, delete copy.

registerConfirmDialog(showFn)

Wire the singleton to a mounted <ConfirmDialog />. Call once in your root layout onMount.

ConfirmOptions

title

string

Dialog heading.

message

string

Supporting description below the title.

confirmText

string

Primary action label. Default: Confirm.

cancelText

string

Secondary action label. Default: Cancel.

icon

'success' | 'error' | 'warning' | 'info' | 'question'

Animated icon shown above the title.

confirmColor

ButtonColor

Semantic color for the confirm button. Default: primary.

showCancel

boolean

When false, only the confirm button is shown (alert-style). Default: true.

dismissible

boolean

When false, Escape and backdrop click do not dismiss. Default: true.

inputPlaceholder

string

Shows a text input or textarea for prompt-style dialogs.

inputValue

string

Initial value for the prompt input.

inputType

'text' | 'password' | 'email' | 'number' | 'textarea'

Input control type when inputPlaceholder is set.

inputChoices

string[]

Quick-pick chips above the prompt input.

onConfirm

(value?: string) => void

Callback when the user confirms. Receives prompt value when applicable.

onCancel

() => void

Callback when the user cancels.

ConfirmDialog props

confirmText

string

Default confirm label when options.confirmText is omitted.

cancelText

string

Default cancel label when options.cancelText is omitted.