v0.0.3

Documentation version

Currently searching v0.0.3

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.2NewOpen component

Modal

A dialog opened by a button, a link or the URL.

Modal is a real <dialog>, which means the browser does the hard parts: it traps focus while it is open, closes on Escape, and makes everything behind it inert so a screen reader does not read the page underneath.

The id is what opens it. Three things can:

  • A control marked data-modal-open="<id>" — a button anywhere on the page.
  • A link to #<id>, which works before any JavaScript runs.
  • The ?modal=<id> query, so a modal can be opened by a link from another page.
astro
<Button data-modal-open="enquire">Get in touch</Button>

<Modal id="enquire" label="Enquiry form">
  <Form action="/api/contact">
    <Input variant="email" required />
    <Button type="submit">Send</Button>
  </Form>
</Modal>

Props

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
idstringNoneWhat opens it: [data-modal-open="<id>"], a link to #<id>, or the ?modal=<id> query. Nothing is output without one.
labelstringNoneNames the dialog for a screen reader. Without one it is announced as an unnamed dialog.
variant"small" | "side-panel" | "full-screen""small"How it arrives. small is a centred card that rises into place, side-panel is a full-height column sliding in from the end edge, and full-screen fills the viewport with the content fading up.
previewbooleanfalseHolds it open while a visual builder is in design mode. Nothing changes on the published page.

The URL is part of the API

?modal=<id> means a modal can be linked to — from an email, from another page, from a campaign. It also means the reader can send that link to someone else and have it open the same thing, which a modal opened only by a button cannot do.