DashKit Icon
DashKit
Dashboard UI Kit
Getting Started
Structure
Components
Variables
Dark Mode
Installation
Template
Style Guide
Licensing
Changelog
Powered by Webflow
Template
Components
Component Documentation
Show Dialog
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
Cancel
Continue
Show Dialog
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
Cancel
Continue

Alert Dialog

The Alert Dialog is a modal interface element that interrupts the user with critical information and typically requires an explicit action to dismiss or continue. Use it for confirmation prompts, warnings, or any situation where the user’s attention and response are essential.

By default, the component includes a trigger button to open the dialog. You can update the button label using the Component Properties panel.

The dialog’s title, body content, and action buttons are also editable via Component Properties. This allows for full customization without needing to dig into the structure.

Usage

  1. Drag the Alert Dialog component onto the canvas.
  2. Update the trigger button label via the properties panel.
  3. Edit the dialog content (e.g. title, message, and actions) in the same panel.
  4. Switch the Variant Mode to preview or adjust visibility:
    • Set to Default to hide the dialog (used for normal publishing).
    • Switch to Temporary Show Module to preview the dialog during design.

GSAP powered interaction

This alert dialog uses Webflow’s new GSAP-powered Interactions. In the Interactions panel, the .alert-dialog_trigger opens its sibling .alert-dialog_popup, which smoothly animates fullscreen. Clicking again reverses the animation, closing it with the same fluid effect.