Modal

The Modal component displays a popup window containing a title and body text, which supports basic formatting. It includes a separate "Open" button with customizable text, shown on the page. You can also choose to have the modal open by default.

Preview

Fields

  • defaultOpen (optional) - Checkbox to define whether the modal is open by default.

  • openButtonText (required) - The text displayed on the button that triggers the modal.

  • modalTitle (required) - The title displayed at the top of the modal.

  • modalText (optional) - Rich text content shown inside the modal body.

Behavior

  • The component renders a button using the openButtonText value.

  • When clicked, the modal opens and displays:

    • The modalTitle as a heading.

    • The modalText as body content, if provided.

  • If defaultOpen is enabled, the modal appears on page load.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Modal -p modal
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules