Bolt Design System

Twig Usage

{# Render a trigger button #}
{% include '@bolt-elements-button/button.twig' with {
  content: 'Open dialog',
  attributes: {
    type: 'button',
    'data-bolt-dialog-target': '#dialog-1',
  }
} only %}

{# Render the related dialog #}
{% set dialog_content %}
  {% include '@bolt-components-dialog/dialog-header.twig' with {
    content: header_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: body_content,
  } only %}
  {% include '@bolt-components-dialog/dialog-footer.twig' with {
    content: footer_content,
  } only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  attributes: {
    id: 'dialog-1'
  },
} only %}

Schema

Dialog (dialog.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content	Renders the dialog content. The dialog-header.twig, dialog-body.twig, and dialog-footer.twig components are expected here.	`any`	—	—
width	Controls the width of the dialog.	`string`	`optimal`	`full`, `regular`, `optimal`, `auto`
spacing	Controls the inset spacing of the dialog header, body, and footer.	`string`	`medium`	`none`, `small`, `medium`, `large`
persistent	Enables the dialog to be persistent. This will eliminate ways to close the dialog and it is up to the author to provide a custom link to close the dialog or redirect to another page within the dialog content.	`boolean`	`false`	—
transparent	Renders a transparent background for the dialog. Only use this when building an image or video only modal without any text. Do not pass header and footer as text will not be legible with a transparent background.	`boolean`	`false`	—

Dialog Header (dialog-header.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Main content of the dialog header.	`any`	—	—

Dialog Body (dialog-body.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Main content of the dialog body.	`any`	—	—

Dialog Footer (dialog-footer.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Main content of the dialog footer.	`any`	—	—

Install

npm install @bolt/components-dialog

Dependencies

@bolt/core-v3.x

Dialog

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