2.23.0

Modal

The Modal component presents users with a short task or gathered information without losing context of the underlying page.

Published

History
View changes
Install
yarn add @bolt/components-modal
Source code
View on Github
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

Overview

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
Overview Usage Schema Edit this page Testing Steps

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.

      • —
Open Accordion Close Accordion
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 —
  • —
Debug Panel