Configurable safeguards
Shared Confirmation Modal Playground
Use this local page to verify the shared confirmation modal across configurable titles, messages, content blocks, color tones, confirm events, programmatic methods, form submission, and typed delete confirmation.
Trigger attributes
Attribute-driven configurations
These examples open the shared modal directly from trigger attributes so icon, copy, tone, content, and delete-confirmation requirements can be validated without writing page-specific controllers.
Review this change?
Use the default tone for low-risk confirmations where the user just needs one last review step.
Leave this setup flow?
Mirror the unsaved-changes leave prompt with a primary action tone and a supporting footer note.
Delete this record?
Destructive actions should stay explicit and compact.
Delete this environment?
Require an exact text match before allowing the destructive action to proceed.
Programmatic methods
Open, close, and reset from JavaScript
This example drives the same shared modal through the exported runtime methods so offcanvas leave guards and other scripted flows can reuse one API surface.
Confirm actions
Form-submit and event-driven confirmations
Confirm actions can either request-submit a form or dispatch a custom event while the default shared confirmation event continues to expose the same payload.
Form submit
Custom event
Archive the current draft?
This example dispatches a custom event after the shared confirmation event so local UI state can react without a form submit.
Payload inspector
Inspect the last confirmation payload
Each confirmation updates the last action summary and the serialized event detail so the shared modal contract stays easy to verify.
Open a demo and confirm it to inspect the payload here.