Modal

A native <dialog> element. Triggered by a button pointing to → [modal: name]. A close button is added automatically.

note

Modal uses the Invoker Commands API (command="show-modal"). Requires Chrome 135+.

Basic usage

The button and the modal are linked by name — the button destination → [modal: contact] matches the modal label contact:

primary button: Open contact form → [modal: contact]

modal: contact
  ## Contact us
  full input: Your name...
  email input: Email address...
  full textarea: How can we help?...
  full blue primary button: Send message

Multiple modals on one page

Each modal must have a unique name:

primary button: Open contact form → [modal: contact]
outline button: View terms → [modal: terms]

modal: contact
  ## Contact us
  email input: Email address...
  full primary button: Send message

modal: terms
  ## Terms of Service
  Last updated: June 2026.
  By using Figdown you agree to our terms.
  outline button: Download PDF

Modal with a centered trigger

centered card:
  centered subtitle: Ready to get started?
  centered primary button: Join the Waitlist → [modal: waitlist]

modal: waitlist
  ## Join the Waitlist
  email input: Your email address...
  full blue primary button: Reserve my spot

Reference

Part	Description
Label	Modal name — used to link the button trigger via → [modal: name]
Children	Content rendered inside the dialog
Close button	Added automatically — no extra syntax needed

Button destination	Effect
→ [modal: name]	Opens the modal with matching label