Bolt Design System

Basic Dialog

A dialog can be used to display interactive content over a webpage. The element is generally hidden on page load and becomes visible after interaction with a trigger. Triggers are typically a Button element or Text Link element.

Important Notes:

This is a replacement for the Modal component.

The trigger must be a semantic <button>.

To relate a trigger to a specific dialog, add the data-bolt-dialog-target attribute to the trigger and set the value to the <dialog>’s unique id or class name (eg. #dialog-1).

There are 3 content areas within a dialog: header, body, and footer. Header and footer are optional, only use them when you need sticky header and footer. Use body for regular dialog content. Each area comes with its own template:

dialog-header.twig

dialog-body.twig

dialog-footer.twig

Reference the Dialog schema for all options.

Demo

Twig

{# 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 %}

HTML

Not available in plain HTML. Please use Twig.