Alert

Import

import { Alert } from '@delightstack/components';

For the programmatic API:

import { alert } from '@delightstack/components';

Basic Usage

Confirm Action

Delete Item

View code

<script>
  import { Alert, Button } from '@delightstack/components';

  let showAlert = $state(false);
  let showDestructive = $state(false);
</script>

<Button onclick={() => showAlert = true}>Confirm Action</Button>
<Button error onclick={() => showDestructive = true}>Delete Item</Button>

<Alert
  bind:open={showAlert}
  title="Save Changes?"
  message="Would you like to save your changes before leaving?"
  continue_text="Save"
/>

<Alert
  bind:open={showDestructive}
  title="Delete Item"
  message="This action cannot be undone. Are you sure you want to delete this item?"
  continue_text="Delete"
  destructive
/>

Examples

With Icon

Display an icon component above the title for visual emphasis.

Show Warning

View code

<script>
  import { Alert, Button } from '@delightstack/components';
  import WarningIcon from './WarningIcon.svelte';

  let showWarning = $state(false);
</script>

<Button onclick={() => showWarning = true}>Show Warning</Button>

<Alert
  bind:open={showWarning}
  title="Warning"
  message="This will overwrite existing data."
  icon={WarningIcon}
  destructive
/>

Programmatic API

Create an alert dialog imperatively using the alert() function. It returns a Promise<boolean> that resolves to true (confirmed) or false (cancelled).

Delete Item

View code

<script>
  import { alert } from '@delightstack/components';
  import { Button } from '@delightstack/components';

  async function handleClick() {
    const confirmed = await alert({
      title: 'Delete?',
      message: 'This cannot be undone.',
      destructive: true,
      continue_text: 'Delete',
    });

    if (confirmed) {
      await api.deleteItem(id);
    }
  }
</script>

<Button error onclick={handleClick}>Delete Item</Button>

Promise-Aware Confirm

When oncontinue returns a Promise, the confirm button automatically enters loading state until the promise resolves.

Process Data

View code

<script>
  import { Alert, Button } from '@delightstack/components';

  let showAlert = $state(false);

  async function handleContinue() {
    await api.processData();
    showAlert = false;
  }
</script>

<Button accent onclick={() => showAlert = true}>Process Data</Button>

<Alert
  bind:open={showAlert}
  title="Process Data"
  message="This may take a moment."
  continue_text="Process"
  oncontinue={handleContinue}
/>

Props

Prop	Type	Default	Description
open	boolean	false	Controls visibility ($bindable())
title	string	'Confirm'	Alert title
message	string	''	Alert message / question
cancel_text	string	'Cancel'	Cancel button label
continue_text	string	'Continue'	Confirm button label
destructive	boolean	false	Style confirm button with error color
icon	Component	undefined	Optional icon component displayed above the title
id	string	auto-generated	Element ID
class	string	''	Additional CSS classes
oncancel	() => void	undefined	Called when Cancel is clicked
oncontinue	() => void | Promise<void>	undefined	Called when Confirm is clicked; promise-aware (button shows loading until resolved)

Events

Event	Detail	Description
oncancel	none	Fires when the user cancels (Cancel button, backdrop click, or Escape key)
oncontinue	none	Fires when the user confirms. If it returns a Promise, the button shows a loading state.

Types

The component exports the AlertOptions interface for the programmatic API and the alert function:

interface AlertOptions {
  title?: string;
  message: string;
  cancel_text?: string;
  continue_text?: string;
  destructive?: boolean;
  icon?: Component;
}

function alert(options: AlertOptions): Promise<boolean>;

Accessibility

• Inherits all Modal accessibility features (role="dialog", aria-modal, focus trap)
• Keyboard navigable: Tab between Confirm and Cancel buttons
• Escape key and backdrop click trigger the cancel action
• When destructive is true, the icon section is styled with the error color