Bolt Design System

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

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.	`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`	—	—

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

tabbable

Modal

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