Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Dialog Width A width can be explicitly set on a dialog. By default, a dialog is about 75 characters wide. Important Notes: Use the width prop to adjust the dialog’s width. Full: This is taking up the full width of the screen minus the gutters (about 2rem on left and right). Regular: This is 10 out 12 columns wide, about 80% of the screen width. Optimal: This is about 75 characters wide, close to optimal reading length (This is the default setting). Auto: This adapts the width of the dialog content. Only use this option if the dialog content has an explicit width. Recommended for advanced usage. Demo

This is a dialog

This dialog has full width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has regular width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has optimal width. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque exercitationem obcaecati, quod quae est suscipit voluptates culpa tenetur nostrum, velit, accusantium iusto officia impedit? Eligendi pariatur nemo sint tenetur maiores.

This is a dialog

This dialog has auto width. It is as wide as the content.
Twig
{% include '@bolt-components-dialog/dialog.twig' with {
  content: content,
  width: 'full',
  attributes: {
    id: 'dialog-width-1'
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.