---
title: "Dialog"
description: "Native HTML dialog element styled by ASW."
type: docs
weight: 36
date: 2026-04-11
tags: ["components", "dialog", "modal"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---

ASW styles the native `<dialog>` element — no JavaScript modal libraries required. Call `dialog.showModal()` to open it. The `::backdrop` pseudo-element receives a semi-transparent overlay automatically.

## Inline Demo

<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
  <button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
  <dialog id="demo-dialog">
    <article>
      <header><h3>Dialog title</h3></header>
      <p>This is a native <code>&lt;dialog&gt;</code> element. ASW styles the backdrop and container automatically.</p>
      <footer>
        <button onclick="document.getElementById('demo-dialog').close()">Close</button>
      </footer>
    </article>
  </dialog>
</div>