Back to Components

Theme:

Dialog Component

Basic Dialog

let dialogOpen = $state(false);

<Button 
  text="Open Dialog" 
  variant="primary"
  onclick={() => dialogOpen = true}
/>

<Dialog 
  bind:isOpen={dialogOpen}
  title="Information"
  message="This is a basic dialog with a simple message."
  onConfirm={() => console.log('Confirmed!')}
  onCancel={() => console.log('Cancelled!')}
/>

Danger Dialog

<Dialog 
  bind:isOpen={dangerDialogOpen}
  title="Delete Item"
  message="Are you sure you want to delete this item? This action cannot be undone."
  variant="danger"
  confirmText="Delete"
  onConfirm={() => console.log('Deleted!')}
  onCancel={() => console.log('Cancelled!')}
/>

Custom Content

<Dialog 
  bind:isOpen={customDialogOpen}
  title="Custom Content"
  onConfirm={handleConfirm}
  onCancel={handleCancel}
>
  <div class="space-y-4">
    <div class="p-4 bg-input-bg-disabled border border-input-border rounded-lg">
      <h4 class="font-medium">Custom Content</h4>
      <p>You can include any HTML content here.</p>
    </div>
  </div>
</Dialog>

Confirmation Dialog

<Dialog 
  bind:isOpen={`{confirmDialogOpen}`}
  title="Save Changes"
  message="Do you want to save your changes before continuing?"
  confirmText="Save"
  cancelText="Don't Save"
  onConfirm={() => console.log('Saved!')}
  onCancel={() => console.log('Discarded!')}
/>

Features

Key Features:

• Backdrop Click: Click outside the dialog to close it
• ESC Key: Press Escape to close the dialog
• Variants: Normal and danger styling variants
• Custom Content: Use snippets for rich content instead of simple messages
• Customizable Buttons: Custom text for confirm and cancel buttons
• Accessible: Proper focus management and ARIA attributes
• Animation: Smooth fade and scale animations