Dialogs
Focused tasks over the page
Basic
Code
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dlg-basic">Open dialog</button>
<div class="modal fade" id="dlg-basic" tabindex="-1" role="dialog" aria-labelledby="dlg-basic-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content glass">
<div class="modal-header">
<h2 class="modal-title" id="dlg-basic-title">Rename project</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div><label class="form-label" for="dlg-name">Name</label><input id="dlg-name" name="dlg-name" type="text" value="Website redesign" class="form-control"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-toast='{"title":"Saved","text":"The project has a new name.","tone":"success"}'>Save</button>
</div>
</div>
</div>
</div>Confirm
For actions that cannot be undone.
Code
<button type="button" class="btn btn-danger-soft" data-bs-toggle="modal" data-bs-target="#dlg-confirm"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Delete project</button>
<div class="modal fade" id="dlg-confirm" tabindex="-1" role="dialog" aria-labelledby="dlg-confirm-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content glass">
<div class="modal-header">
<h2 class="modal-title" id="dlg-confirm-title">Delete this project?</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="m-0 text-label-2">The project and its 42 tasks will be deleted. You can restore them for 30 days.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-danger" data-bs-dismiss="modal" data-toast='{"title":"Project deleted","text":"You can restore it for 30 days.","tone":"danger"}'>Delete</button>
</div>
</div>
</div>
</div>Large
For forms with more fields.
Code
<button type="button" class="btn btn-gray" data-bs-toggle="modal" data-bs-target="#dlg-large"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>New contact</button>
<div class="modal fade" id="dlg-large" tabindex="-1" role="dialog" aria-labelledby="dlg-large-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content glass">
<div class="modal-header">
<h2 class="modal-title" id="dlg-large-title">New contact</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-grid">
<div><label class="form-label" for="nc-first">First name</label><input id="nc-first" name="nc-first" type="text" class="form-control"></div>
<div><label class="form-label" for="nc-last">Last name</label><input id="nc-last" name="nc-last" type="text" class="form-control"></div>
<div class="span-2">
<label class="form-label" for="nc-email">Email</label>
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="nc-email" name="nc-email" type="email">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Create</button>
</div>
</div>
</div>
</div>