Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Transparent Dialog A transparent dialog is recommended when creating image or video only dialogs, and other advanced dialogs. Important Notes: Set the transparent prop to true to make a dialog transparent. When building advanced transparent dialogs, make sure to adjust text color or manually add background color because the dialog has no background at all. See the image only dialog use case. See the video only dialog use case. Demo
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?
Twig
{% include '@bolt-elements-button/button.twig' with {
  content: 'Transparent dialog',
  attributes: {
    type: 'button',
    'data-bolt-dialog-target': '#dialog-transparent',
  }
} only %}

{% set dialog_content %}
  {# Manually set the color theme (text + background color) #}
  {% include '@bolt-components-dialog/dialog-body.twig' with {
    content: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia aliquam distinctio optio debitis ab praesentium, velit magnam aliquid tenetur sequi ipsam maiores porro sapiente eaque. Maiores quibusdam eaque cupiditate placeat?',
    attributes: {
      class: 't-bolt-yellow',
    },
  } only %}
{% endset %}

{% include '@bolt-components-dialog/dialog.twig' with {
  content: dialog_content,
  transparent: true,
  attributes: {
    id: 'dialog-transparent'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.