Modal

Preview

Open dialog

This is your dialog

Naughty running cat bite off human’s toes spit up on light gray carpet instead of adjacent linoleum.

Close Got it

Server data

GET /htmx/modal

Code

---
import Button from "@components/Button.astro";
import Modal from "@components/Modal.astro";
---
<Button onclick="window.normalDialog.showModal()">
  Open dialog
</Button>
<Modal id="normalDialog">
  <h4>This is your dialog</h4>
  <p>Naughty running cat bite off human's toes spit up on light gray carpet instead of adjacent linoleum.</p>
  <Button slot="close">Close</Button>
  <Button slot="action" intent="primary">Got it</Button>
</Modal>

<Button hx-get="/htmx/modal" hx-target="#serverDialog" onclick="window.serverDialog.showModal()">
  GET /htmx/modal
</Button>
<Modal id="serverDialog" />

Install

npx ui-gen add modal

---

Properties

id (required)

type: string

default: dialog

intent

type: string

default: info

options: info, success, warning, danger

closeOutside

type: boolean

default: true

Closes the modal when clicking outside.