Modal

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

Twig Usage
{% include '@bolt-elements-button/button.twig' with {
  content: 'Open Modal',
  attributes: {
    type: 'button',
    'data-bolt-modal-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
persistent

Enables the modal to be persistent. This will eliminate ways to close the modal and it is up to the author to provide a custom link to close the modal or redirect to another page within the modal content. Must be used in tandem with the persistent_return_url prop.

boolean false
persistent_return_url

The URL to be used on a return link. If a modal is persistent, a return link is required to provide the user a way out. Must be used in tandem with the persistent prop.

string
theme

Controls the color theme of the modal container. Note: the values xlight, light, dark, xdark, xxdark are deprecated.

string white
  • none, white, black, gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, violet
scroll

Controls the scrolling area.

string container
  • overall or container
uuid

Unique ID for modal, randomly generated if not provided.

string
Install Install
npm install @bolt/components-modal
Dependencies @a11y/focus-trap @bolt/components-button @bolt/components-text @bolt/components-trigger @bolt/core @bolt/lazy-queue tabbable