The Modal component presents users with a short task or gathered information without losing context of the underlying page. Part of the collection of components, visual styles, and build tools that power the Bolt Design System.

Install via NPM

npm install @bolt/components-modal

Usage

  {% include "@bolt-components-button/button.twig" with {
  text: "Open Modal",
  attributes: {
    "on-click": "show",
    "on-click-target": "js-target-name"
  }
} only %}

{% include "@bolt-components-modal/modal.twig" with {
  content: "This is a modal",
  attributes: {
    class: "js-target-name"
  },
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Used to apply additional HTML attributes to the outer <bolt-modal> tag.	`object`	—	—
width	Controls the width of the modal container.	`string`	`optimal`	`full`, `regular`, `optimal`, `auto`
spacing	Controls the spacing around the modal container.	`string`	`medium`	`none`, `small`, `medium`, `large`
theme	Controls the color theme of the modal container.	`string`	`xlight`	`none`, `xlight`, `light`, `dark`, `xdark`
scroll	Controls the scrolling area.	`string`	`container`	`overall` or `container`
uuid	Unique ID for modal, randomly generated if not provided.	`string`	—	—
slots	There are 3 sections (slots) within the modal container. By assigning the appropriate slot name, content will be passed into the respective section.	`object`	—	`default` The body section of the modal container. — `header` The header section of the modal container. — `footer` The footer section of the modal container. —