Modal

A dialog overlay for focused user interactions. Uses the native HTML dialog element.

Basic Usage

The Modal component uses the native <dialog> element with automatic focus trapping, backdrop, and Escape key support.

Confirm Action

Are you sure you want to proceed?
dart
1
2
3
4
5
6
7
8
9
10
11
DModal(
  trigger: DButton(label: 'Open Modal'),
  title: 'Confirm Action',
  children: [
    p([Component.text('Are you sure you want to proceed?')]),
  ],
  footer: div(classes: 'flex gap-2 justify-end', [
    DButton(label: 'Cancel', variant: DButtonVariant.ghost),
    DButton(label: 'Confirm'),
  ]),
)

Sizes

Extra Small Modal

This is an extra small modal.

Small Modal

This is a small modal.

Medium Modal

This is a medium modal (default).

Large Modal

This is a large modal.

Extra Large Modal

This is an extra large modal.
dart
1
2
3
4
5
DModal(trigger: DButton(label: 'XS'), size: DModalSize.xs, ...)
DModal(trigger: DButton(label: 'SM'), size: DModalSize.sm, ...)
DModal(trigger: DButton(label: 'MD'), size: DModalSize.md, ...)  // Default
DModal(trigger: DButton(label: 'LG'), size: DModalSize.lg, ...)
DModal(trigger: DButton(label: 'XL'), size: DModalSize.xl, ...)

With Description

Delete Item

This action cannot be undone.

Are you sure you want to delete this item permanently?
dart
1
2
3
4
5
6
7
8
9
10
11
12
DModal(
  trigger: DButton(label: 'Delete Item', color: DButtonColor.error),
  title: 'Delete Item',
  description: 'This action cannot be undone.',
  children: [
    p([Component.text('Are you sure you want to delete this item permanently?')]),
  ],
  footer: div(classes: 'flex gap-2 justify-end', [
    DButton(label: 'Cancel', variant: DButtonVariant.ghost),
    DButton(label: 'Delete', color: DButtonColor.error),
  ]),
)

Fullscreen Mode

Fullscreen View

This modal takes up the entire screen.
dart
1
2
3
4
5
6
DModal(
  trigger: DButton(label: 'Fullscreen Modal'),
  title: 'Fullscreen View',
  fullscreen: true,
  children: [...],
)

API Reference

Prop Type Default Description
trigger Component required Element that opens the modal
title String? null Modal title
description String? null Subtitle below title
header Component? null Custom header content
children List<Component> [] Modal body content
footer Component? null Footer content
size DModalSize md Modal width (xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl, full)
closeOnOverlay bool true Close when clicking backdrop
fullscreen bool false Fullscreen mode