1. Docs
2. Components
3. Dialog

Dialog

The <velin-dialog> Web Component wraps the native <dialog> element and provides a promise-based JavaScript API for alert, confirm, and prompt interactions.

Basic Example

<velin-dialog id="myDialog"></velin-dialog>

<script>
  const dlg = document.getElementById('myDialog');

  // Alert — returns Promise<true>
  await dlg.alert('Hello!');

  // Confirm — returns Promise<boolean>
  const ok = await dlg.confirm('Delete this item?', {
    title: 'Confirm delete',
    danger: true
  });

  // Prompt — returns Promise<string | null>
  const name = await dlg.prompt('What is your name?', {
    placeholder: 'Enter name…',
    defaultValue: 'World'
  });
</script>

Accessibility

• Uses native <dialog> with showModal() for built-in focus trapping and ::backdrop.
• Close button has aria-label="Close".
• Escape key is intercepted to dismiss gracefully.
• Prompt input is auto-focused and submits on Enter.

CSS Variables

JavaScript API

Methods

Options

Events