Kodza
Browse · 108

Dialog

A real dialog that grows out of the button that opened it and goes back into it. The alert version asks you to type the name before it deletes anything.

View the code Ask your AI
Overlays No dependencies dialogmodalalertdialogconfirm Added Oct 2025
/anim/modal-component/ Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Confirm account deletion with a Kodza Dialog.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.
kodza-modal-component.html 
<div class="kodza-dialog">
  <button class="kodza-dialog__trigger" type="button">Edit profile</button>
  <dialog class="kodza-dialog__panel">
    <form class="kodza-dialog__form" method="dialog">
      <header class="kodza-dialog__head">
        <h2 class="kodza-dialog__title">Edit profile</h2>
        <p class="kodza-dialog__text">This is how other devs see you. Choose wisely.</p>
      </header>
      <div class="kodza-dialog__body">
        <label class="kodza-dialog__field"><span>Name</span><input type="text" name="name" value="Ada Lovelace" autocomplete="name"></label>
        <label class="kodza-dialog__field"><span>Bio</span><input type="text" name="bio" value="Wrote the first program. Still no merge conflicts." autocomplete="off"></label>
      </div>
      <footer class="kodza-dialog__foot">
        <button class="kodza-dialog__button" type="submit" value="cancel" formnovalidate>Cancel</button>
        <button class="kodza-dialog__button kodza-dialog__button--ink" type="submit" value="save">Save changes</button>
      </footer>
      <button class="kodza-dialog__close" type="submit" value="cancel" formnovalidate aria-label="Close"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
    </form>
  </dialog>
</div>

<div class="kodza-dialog kodza-dialog--alert" data-confirm="kodza-site">
  <button class="kodza-dialog__trigger kodza-dialog__trigger--danger" type="button">Delete project</button>
  <dialog class="kodza-dialog__panel">
    <form class="kodza-dialog__form" method="dialog">
      <header class="kodza-dialog__head">
        <span class="kodza-dialog__icon" aria-hidden="true"><svg viewBox="0 0 20 20"><path d="M10 3 18 17H2z"/><path d="M10 8v4M10 14.5v.2"/></svg></span>
        <h2 class="kodza-dialog__title">Delete kodza-site?</h2>
        <p class="kodza-dialog__text">This deletes the project, its 214 deploys and every "final-v3" file. There is no undo, and no backup either. We checked.</p>
      </header>
      <div class="kodza-dialog__body">
        <label class="kodza-dialog__field"><span>Type <b>kodza-site</b> to confirm</span><input class="kodza-dialog__confirm" type="text" name="confirm" autocomplete="off" spellcheck="false"></label>
      </div>
      <footer class="kodza-dialog__foot">
        <button class="kodza-dialog__button" type="submit" value="cancel" formnovalidate>Keep it</button>
        <button class="kodza-dialog__button kodza-dialog__button--ink kodza-dialog__go" type="submit" value="delete" disabled>Delete forever</button>
      </footer>
    </form>
  </dialog>
</div>

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed
Light and darkThe same checks on both themes, contrast included. Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On the button
  • Opens it, focus goes into the panelEnter/Space
In a field
  • Runs the main button, once it's enabledEnter
In the panel
  • Next or previous control, the page behind is out of reachTab/⇧Tab
Anywhere, while it's open
  • Closes it, focus back on the buttonEsc

More like this

More in Overlays

See all Overlays Request a component