Modal

Dialog overlay triggered by a button, for focused content or actions.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Modal from "@wrappers/modal/Modal.astro";
---

<Modal
contentSections={
  [
    {
      "_component": "building-blocks/core-elements/heading",
      "text": "Welcome",
      "level": "h2",
      "size": "md"
    },
    {
      "_component": "building-blocks/core-elements/text",
      "text": "This is a modal dialog. Click the backdrop or press Escape to close it."
    }
  ]
} label="Example modal" size="md" triggerSize="md" triggerText="Open modal" triggerVariant="primary"
/>

---
blocks:
  _component: building-blocks/wrappers/modal
  label: Example modal
  triggerText: Open modal
  triggerVariant: primary
  triggerSize: md
  size: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Welcome
      level: h2
      size: md
    - _component: building-blocks/core-elements/text
      text: This is a modal dialog. Click the backdrop or press Escape to close it.
---

Overview

A dialog overlay triggered by a button. Uses the native <dialog> element for built-in focus trapping, Escape to close, and backdrop. Content is rendered inside the modal body using content sections.

Properties

label string

Accessible label for the modal dialog.

triggerText string | default: Open

Text displayed on the button that opens the modal.

triggerVariant enum | default: primary

Visual style of the trigger button.

Accepted values:

primary
secondary
tertiary
ghost
text

triggerSize enum | default: md

Size of the trigger button.

Accepted values:

sm
md
lg

triggerIconName enum

Optional icon for the trigger button.

size enum | default: md

Maximum width of the modal dialog.

Accepted values:

sm
md
lg
xl

contentSections array | default: array

Content blocks displayed inside the modal.