Dialog Component

Native <dialog> component. Supports :target (anchor), show() and showModal() open methods. Structure: dialog > [data-role="header"] > [data-role="title"] + [data-role="tools"] + [data-role="body"] + [data-role="footer"].

Notes

Open methods

:target anchor

Open standard dialog

JS show() — no backdrop

JS showModal() — with backdrop

Basic dialogs

Standard dialog

Header, body, footer structure.

Open

Simple dialog

Body only, no header/footer.

Open

Long content

Scrollable content.

Open

Theme colors

Primary

Open

Success

Open

Warning

Open

Error

Open

Use cases

Confirm dialog

Delete confirm

Form dialog

Login

Info prompt

Success

Dialog Title

Standard dialog with full header, body, and footer.

Close via top-right X, footer button, or ESC key.

Close

Simple dialog with body only.

Close

Long Content

Demonstrating scrollable content inside a dialog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Close

Primary Dialog

Primary theme dialog.

Close

Operation Successful

Operation completed successfully!

Close

Warning

This operation may have risks. Are you sure?

Close

Error

Operation failed. Please try again later.

Close

Confirm Deletion

Are you sure you want to delete this record? This action cannot be undone.

Cancel

Login

Username:
Password:

Close

Success

Your operation completed successfully!

Close

JS show() Dialog

Opened via dialog.show() — no backdrop.

Close

showModal() Dialog

Opened via dialog.showModal() — with backdrop overlay.

Close