<wa-dialog>

Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms, or focused tasks that interrupt the main flow.

Category

Overlays

Built with

Lit

Library

Web Awesome

Author

Web Awesome

Package

@awesome.me/webawesome

Component size

30.9 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

8.2 kB JS (shared by every Web Awesome component, loaded once per page)

Popular

5 out of 5

Downloads

364,100/week · jsDelivr 33,114,338 hits/month (whole @awesome.me/webawesome package)

GitHub stars

1,348

Latest stable version

3.14.0

License

MIT

Status

stable

• Documentation
• Demo
• Source code

Attributes

• open
• label
• without-header
• light-dismiss
• with-footer
• with-label
• dir
• lang
• did-ssr

Slots

• label
• header-actions
• footer

Events

• wa-show
• wa-after-show
• wa-hide
• wa-after-hide

CSS Parts

• dialog
• header
• header-actions
• title
• close-button
• close-button__base
• body
• footer