Vitreo
Components

Dialogs

Focused tasks over the page

Basic

Code 
<button type="button" class="btn btn-primary" data-dialog-open="dlg-basic">Open dialog</button>
<div class="dialog-backdrop" id="dlg-basic" hidden data-dialog>
  <div class="dialog glass" role="dialog" aria-modal="true" aria-labelledby="dlg-basic-title">
    <div class="dialog-head">
      <h2 class="dialog-title" id="dlg-basic-title">Rename project</h2>
      <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <div class="dialog-body">
      <div><label class="form-label" for="dlg-name">Name</label><input id="dlg-name" name="dlg-name" type="text" value="Website redesign" class="input"></div>
    </div>
    <div class="dialog-foot">
      <button type="button" class="btn btn-ghost" data-close>Cancel</button>
      <button type="button" class="btn btn-primary" data-close data-toast='{"title":"Saved","text":"The project has a new name.","tone":"success"}'>Save</button>
    </div>
  </div>
</div>

Confirm

For actions that cannot be undone.

Code 
<button type="button" class="btn btn-danger-soft" data-dialog-open="dlg-confirm"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Delete project</button>
<div class="dialog-backdrop" id="dlg-confirm" hidden data-dialog>
  <div class="dialog glass dialog-sm" role="dialog" aria-modal="true" aria-labelledby="dlg-confirm-title">
    <div class="dialog-head">
      <h2 class="dialog-title" id="dlg-confirm-title">Delete this project?</h2>
      <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <div class="dialog-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="dialog-foot">
      <button type="button" class="btn btn-ghost" data-close>Cancel</button>
      <button type="button" class="btn btn-danger" data-close data-toast='{"title":"Project deleted","text":"You can restore it for 30 days.","tone":"danger"}'>Delete</button>
    </div>
  </div>
</div>

Large

For forms with more fields.

Code 
<button type="button" class="btn btn-gray" data-dialog-open="dlg-large"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>New contact</button>
<div class="dialog-backdrop" id="dlg-large" hidden data-dialog>
  <div class="dialog glass dialog-lg" role="dialog" aria-modal="true" aria-labelledby="dlg-large-title">
    <div class="dialog-head">
      <h2 class="dialog-title" id="dlg-large-title">New contact</h2>
      <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <div class="dialog-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="input"></div>
        <div><label class="form-label" for="nc-last">Last name</label><input id="nc-last" name="nc-last" type="text" class="input"></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="dialog-foot">
      <button type="button" class="btn btn-ghost" data-close>Cancel</button>
      <button type="button" class="btn btn-primary" data-close>Create</button>
    </div>
  </div>
</div>
© Vitreo. All rights reserved.