Modal

A content container that usually presents users with a short task or gathered information without losing context of the underlying page.

Published Last updated: 2.24.1 Change log Github NPM
Twig 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.

      • —
Advanced Schema Options
disabled

Default disabled prop supported globally by most Bolt components.

 boolean —
  • —
no_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

 boolean —
  • —
no-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

 boolean —
  • —
Install Install 
  npm install @bolt/components-modal
Dependencies @a11y/focus-trap @bolt/components-button @bolt/components-text @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue a11y-dialog focus-trap tabbable