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
Open Dialog
Edit profile
Make changes to your profile here. Click save when you're done.
Name
Username
Close
Open Dialog
Edit profile
Make changes to your profile here. Click save when you're done.
Name
Username
Close

Dialog

The Dialog component is an overlaid window that appears on top of the main interface, often used for forms, confirmations, or focused content. When active, it renders the content underneath temporarily inactive, guiding the user’s attention to the dialog.

By default, the component includes a trigger button to open the dialog.

Inside the dialog itself, there are two customizable slots:

  • Content Slot – the main area where you place headings, text, inputs, or other elements
  • Footer Slot – typically used for action buttons like "Cancel" and "Confirm"

Usage

  1. Drag the Dialog component onto the canvas.
  2. Edit the trigger button label via the Component Properties panel.
  3. Add your custom content inside the dialog’s main content slot.
  4. Insert buttons or secondary actions into the footer slot as needed.

This component is ideal for modals that require user interaction without navigating away from the current view.

GSAP powered interaction

This dialog uses Webflow’s new GSAP-powered Interactions. When the .dialog_trigger is clicked, the .dialog_popup animates open. Clicking .dialog_close or .dialog_footer closes the dialog popup again.