Dialog component
Dialog
Sizes, alert mode, scrollable, and form-in-dialog patterns.
Basic Dialog
Trigger-based modal with footer actions.
This is a demonstration of the PUI dialog component. Dialogs are useful for confirmations, forms, and complex interactions that require user attention.
Sizes
Four dialog sizes: sm, md, lg, xl.
A compact dialog for quick confirmations.
The default dialog size.
A large dialog with more room for content.
An extra large dialog for complex content.
Alert Dialog
Destructive confirmation with alert semantics.
This action cannot be undone. This will permanently delete the item.
Scrollable Body
Content scrolls while title and footer stay visible.
Activity #1: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #2: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #3: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #4: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #5: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #6: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #7: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #8: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #9: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #10: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #11: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #12: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #13: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #14: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #15: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #16: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #17: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #18: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #19: This dialog body scrolls automatically when the content grows taller than the viewport.
Activity #20: This dialog body scrolls automatically when the content grows taller than the viewport.
No Close Button
Disable the built-in close button.
Disable the built-in close button when you want a custom action row only.
Form Inside Dialog
Collect structured input through a modal overlay.