Dialog

Dialog component documentation for Velyx. Installation, usage examples, variants, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Dialog

Dialogs are overlays that focus the user's attention on a specific task or piece of information.

Installation

Add the dialog component to your project:

npx velyx@latest add dialog
pnpm dlx velyx@latest add dialog
yarn dlx velyx@latest add dialog
bunx --bun velyx@latest add dialog

Alpine.js Required: The dialog component requires Alpine.js for interactivity. Make sure Alpine.js is installed in your project.

Usage

Basic Dialog

Dialog

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Dialog

Full preview from the registry iframe.

Open in tab

Loading preview...

Compact Dialog

Dialog

small

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Dialog

Full preview from the registry iframe.

Open in tab

Loading preview...

Large Dialog

Dialog

large

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Dialog

Full preview from the registry iframe.

Open in tab

Loading preview...

Full-width Dialog

Dialog

fullscreen

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Dialog

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
id string dialog Unique identifier for the dialog
size string md Dialog size (sm, md, lg, xl, 2xl, 3xl, 4xl, full)
closeable boolean true Show close button and allow closing
title string null Dialog title
footer slot null Dialog footer content

Accessibility

Dialogs include:

  • Focus trap - Tab cycles within the dialog
  • Escape key - Closes modal when closeable is true
  • Click outside - Closes modal when closeable is true
  • ARIA attributes - Proper screen reader support

Keyboard Interactions

Key Action
Escape Close dialog (when closeable)
Tab Move focus within the dialog
Shift + Tab Move focus backwards

Next Steps