overlays
dialog
Dialog
Accessible modal with focus trap.
$
Component docs
ndui add dialog
External-control modals
Delete account?
This will permanently remove your account, all projects, and uploaded files. This action cannot be undone.
New project
No results found
Source
<noundry-button variant="danger"
x-on:click="$dispatch('open-modal', 'showcase-confirm')">
Delete account
</noundry-button>
<noundry-modal id="showcase-confirm" title="Delete account?" size="md">
<p>This will permanently remove your account…</p>
<noundry-button variant="secondary"
x-on:click="$dispatch('close-modal', 'showcase-confirm')">Cancel</noundry-button>
<noundry-button variant="danger"
x-on:click="$dispatch('close-modal', 'showcase-confirm')">Yes, delete</noundry-button>
</noundry-modal>Self-trigger modal (no id)
Quick info
Without an id attribute the modal renders its own internal trigger button.
Use this when you don't need to dispatch from elsewhere on the page.
Source
<noundry-modal title="Quick info"
size="sm"
button-text="Show details"
button-variant="secondary">
<p>Without an id the modal renders its own internal trigger.</p>
</noundry-modal>