Composites & Sections · 24 Props

Modal

Dialog overlay with optional trigger button, scrollable body via RenderBlocks, and configurable footer. Supports persistent mode to prevent backdrop/escape close.

Composites & Sections 24 Props

src/components/blocks/Modal.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
id *	string	—
title *	string	—
badge	string	—	Badge text shown above the title in the header
badgeTone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"
blocks	any[]	[]
class	string	""
closeLabel	string	—
confirmHref	string	—
confirmLabel	string	—
confirmTone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"
footer	boolean	false
footerBlocks	any[]	[]
headerClass	string	—	Extra classes for the header area (use to override bg, padding, etc.)
persistent	boolean	false
size	string	lg	"sm" \| "md" \| "lg" \| "xl"
subtitle	string	—
tone	string	neutral	"surface-even" \| "surface-odd" \| "primary" \| "accent" \| "neutral"
triggerClass	string	""
triggerIcon	string	—
triggerLabel	string	—
triggerSize	string	md	"sm" \| "md" \| "lg" \| "xl" \| "xs"
triggerTone	string	accent	"primary" \| "secondary" \| "accent" \| "neutral" \| "success" \| "info" \| "warning" \| "error"
triggerVariant	string	outline	"link" \| "outline" \| "ghost" \| "dash" \| "solid" \| "soft"
variant	string	solid	"outline" \| "solid" \| "soft"

Beispiele

With Trigger

Built-in trigger button with footer actions.

{
  "type": "modal",
  "props": {
    "id": "demo-trigger-modal",
    "title": "Example Modal",
    "subtitle": "This modal was opened via the built-in trigger button.",
    "triggerLabel": "Open Modal",
    "triggerTone": "accent",
    "triggerVariant": "outline",
    "closeLabel": "Cancel",
    "confirmLabel": "Confirm",
    "confirmTone": "accent",
    "blocks": [
      {
        "type": "text",
        "props": {
          "text": "Modal body content rendered via RenderBlocks. You can put any blocks here."
        }
      },
      {
        "type": "list",
        "props": {
          "variant": "checks",
          "tone": "accent",
          "items": [
            {
              "text": "Scrollable body"
            },
            {
              "text": "Built-in footer"
            },
            {
              "text": "Teleported to body"
            }
          ]
        }
      }
    ]
  }
}

<Modal
  id="demo-trigger-modal"
  title="Example Modal"
  subtitle="This modal was opened via the built-in trigger button."
  triggerLabel="Open Modal"
  triggerTone="accent"
  triggerVariant="outline"
  closeLabel="Cancel"
  confirmLabel="Confirm"
  confirmTone="accent"
/>

Persistent

Closes only via explicit button clicks, not backdrop or Escape.

{
  "type": "modal",
  "props": {
    "id": "demo-persistent-modal",
    "title": "Confirm Action",
    "subtitle": "This modal cannot be closed via backdrop click or Escape.",
    "persistent": true,
    "triggerLabel": "Open Persistent Modal",
    "triggerTone": "error",
    "triggerVariant": "outline",
    "closeLabel": "Cancel",
    "confirmLabel": "Delete",
    "confirmTone": "error",
    "blocks": [
      {
        "type": "alert",
        "props": {
          "tone": "error",
          "title": "Warning",
          "text": "This action cannot be undone. Close only via buttons."
        }
      }
    ]
  }
}

<Modal
  id="demo-persistent-modal"
  title="Confirm Action"
  subtitle="This modal cannot be closed via backdrop click or Escape."
  persistent
  triggerLabel="Open Persistent Modal"
  triggerTone="error"
  triggerVariant="outline"
  closeLabel="Cancel"
  confirmLabel="Delete"
  confirmTone="error"
/>