ConfirmDialog

Modal confirmation dialog for important decisions and destructive actions. Features backdrop click to close, escape key support, and loading states.

Installation

typescript 
import { ConfirmDialog } from '@happyvertical/smrt-svelte';

Basic Usage

Simple confirmation dialog with title and message.

svelte 
<Button onclick={() => showDialog = true}>Open Dialog</Button>

<ConfirmDialog
  open={showDialog}
  title="Confirm Action"
  message="Are you sure you want to proceed?"
  onconfirm={() => { showDialog = false; }}
  oncancel={() => showDialog = false}
/>

Destructive Action

Red styling for dangerous or irreversible actions.

svelte 
<ConfirmDialog
  open={showDialog}
  title="Delete Item"
  message="This action cannot be undone. Are you sure?"
  confirmLabel="Delete"
  destructive
  onconfirm={handleDelete}
  oncancel={() => showDialog = false}
/>

Custom Labels

Customize button labels for context.

svelte 
<ConfirmDialog
  open={showDialog}
  title="Publish Article"
  message="This will make your article visible to all users."
  confirmLabel="Publish Now"
  cancelLabel="Keep as Draft"
  onconfirm={handlePublish}
  oncancel={() => showDialog = false}
/>

Loading State

Show loading indicator while processing.

svelte 
<ConfirmDialog
  open={showDialog}
  title="Sending..."
  message="Please wait while we process your request."
  loading={isLoading}
  onconfirm={handleConfirm}
  oncancel={() => showDialog = false}
/>

Props

PropTypeDefaultDescription
open *boolean-Whether the dialog is open
title *string-Dialog title
message *string-Dialog message
confirmLabel string'Confirm'Confirm button label
cancelLabel string'Cancel'Cancel button label
destructive booleanfalseUse destructive (red) styling for confirm
loading booleanfalseShow loading state on confirm
onconfirm () => void-Called when confirm is clicked
oncancel () => void-Called when cancel is clicked or dialog closed

TypeScript

typescript 
import { ConfirmDialog } from '@happyvertical/smrt-svelte';

interface Props {
  open: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  destructive?: boolean;
  loading?: boolean;
  onconfirm?: () => void;
  oncancel?: () => void;
}

Accessibility

  • Uses role="dialog" and aria-modal="true"
  • Title connected via aria-labelledby
  • Escape key closes the dialog
  • Clicking backdrop closes the dialog
  • Buttons disabled during loading state