Dialog

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

Published Last updated: 5.5.0 Change log Github NPM
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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 Install
npm install @bolt/components-dialog
Dependencies @bolt/core-v3.x