Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
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

This is a dialog

Esse qui aliqua cupidatat anim duis exercitation aliquip occaecat consectetur cupidatat. Labore nisi pariatur adipisicing minim enim amet consectetur voluptate occaecat ipsum dolore laboris et. Consequat non voluptate excepteur consequat pariatur Lorem est ea. Nisi enim elit quis dolore fugiat officia nulla.
{# 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 %}
Not available in plain HTML. Please use Twig.