Bolt Design System

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

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

  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

Modal

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