Dialog

A content container that usually presents users with a short task or gathered information without losing context of the underlying page.
Usage recommendations
Dos Donts
Use for Short Forms: Modals are good for capturing small amounts of essential information, like login details or short feedback forms. Don't Include Non-Essential Information: Modals should not be used for content that isn't directly related to the user's current task or decision-making process.
Include Critical Actions: Use modals to house actions that are crucial but auxiliary to the main content, like "Save" or "Delete" confirmation buttons. Don't Use for Long Content: If a piece of content is too long and requires scrolling, it probably doesn't belong in a modal. Long forms and articles are better suited to full pages.
Use for Quick Previews: Modals can be helpful for displaying additional information or previews that are supplementary to the main content, such as image or video enlargements. Don't Use Multiple Modals: Avoid "modal inception" (a modal within a modal). This can create a confusing experience and make it difficult for the user to keep track of what they are doing.
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 Install 
npm install @bolt/components-dialog
Dependencies @bolt/core