Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Alert dialogs
Overlays

Alert dialogs

Alert dialogs patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

AlertDialog

A native modal with alertdialog semantics. Application actions and persistence remain separate.

Live preview

Review this sample action

This native dialog supports Escape, keyboard focus containment and return to the opener. Connect application actions separately.

View HTML / PlaygroundHTML source
example.htmlHTML
<button type="button" class="sl-btn" commandfor="ref-alert-dialog" command="show-modal">
  Open dialog
</button>
<dialog
  class="sl-dialog"
  id="ref-alert-dialog"
  aria-labelledby="ref-alert-dialog-title"
  role="alertdialog"
>
  <div class="sl-dialog__head">
    <h3 id="ref-alert-dialog-title" class="sl-text-xl">Review this sample action</h3>
    <button
      class="sl-close"
      type="button"
      commandfor="ref-alert-dialog"
      command="close"
      aria-label="Close Review this sample action"
    >
      ×
    </button>
  </div>
  <div class="sl-stack">
    <p>
      This native dialog supports Escape, keyboard focus containment and return to the
      opener. Connect application actions separately.
    </p>
    <button class="sl-btn" type="button" commandfor="ref-alert-dialog" command="close">
      Close example
    </button>
  </div>
</dialog>
HTML source · enable JavaScript for the playground31 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.