Dialog

Dialog is a simple container component that provides consistent styling and elevation.

<bolt-dialog>
  <p>This is content within a dialog container.</p>
</bolt-dialog>

Dialog is commonly used to contain list elements.

<bolt-dialog>
  <bolt-list>
    <bolt-list-item>Option 1</bolt-list-item>
    <bolt-list-item>Option 2</bolt-list-item>
    <bolt-list-item>Option 3</bolt-list-item>
  </bolt-list>
</bolt-dialog>

Dialog can contain rich list content with sections, dividers, and subtitles.

<bolt-dialog>
  <bolt-list>
    <p class="bolt-list__heading">Account Settings</p>
    <p class="bolt-list__copy">Manage your preferences</p>
    <bolt-divider></bolt-divider>
    <bolt-list-item subtitle="Update your personal information">
      <bolt-icon decorative slot="leading" name="person"></bolt-icon>
      Profile
      <bolt-icon decorative slot="trailing" name="chevron-right"></bolt-icon>
    </bolt-list-item>
    <bolt-list-item subtitle="Manage notification preferences">
      <bolt-icon decorative slot="leading" name="bell"></bolt-icon>
      Notifications
      <bolt-icon decorative slot="trailing" name="chevron-right"></bolt-icon>
    </bolt-list-item>
    <p class="bolt-list__heading">Security</p>
    <bolt-list-item subtitle="Password and authentication">
      <bolt-icon decorative slot="leading" name="lock"></bolt-icon>
      Security Settings
      <bolt-icon decorative slot="trailing" name="chevron-right"></bolt-icon>
    </bolt-list-item>
    <bolt-list-item subtitle="Data and privacy settings">
      <bolt-icon decorative slot="leading" name="shield"></bolt-icon>
      Privacy
      <bolt-icon decorative slot="trailing" name="chevron-right"></bolt-icon>
    </bolt-list-item>
  </bolt-list>
</bolt-dialog>

<bolt-dialog>
  <div slot="header">Header content</div>
  <!-- Main content goes here -->
  <div slot="footer">Footer content</div>
</bolt-dialog>

The <bolt-dialog> custom element is a simple container component with no configurable properties beyond global HTML attributes.

• default slot (required)
  • Main content area (body section). Always visible and scrollable.
• header slot (optional)
  • Top section with automatic bottom border when populated.
• footer slot (optional)
  • Bottom section with automatic top border when populated.

The <bolt-dialog> component does not emit any custom events.

The <bolt-dialog> component does not expose any public methods.

The <bolt-dialog> component does not include any built-in test selectors. Use standard query selectors to target the element in tests.

• Dialogs sit above other elements on an page and give the user specific options of actions to take or places to go.
• Most often, Dialogs should be attached to a trigger object like a Reveal Button or input, but they may also exist independently, such as a custom right-click dialog.
• Dialogs may contain a number of elements, most commonly being a List.
• The Dialog pattern contains 3 areas: Header, Body and Footer. The Body is the only required area.
  • Content inside all areas is user-determined.

• Use when it is desired to present a specific set of options in specific areas of a page, instead of in the main navigation.
• Use when there are multiple actions or paths (at least 2-3 is advised) a user could take with an element on the page, and they can’t be displayed on the page, or they are tertiary actions or paths.

• Avoid using if the included options are the primary interactions for the page.
• Avoid if there are only one or two options available and it would better serve the user to have them always visible on the page.

• Keep labels concise and direct by using action-oriented, easily understood language. A user should know exactly what will happen when they select an option in a Dialog.
• Dialog options should use sentence case unless there is a business line precedent.
• Avoid using ellipses if content gets cut off due to container size limitations. It is preferred to shorten the text or allow the text to wrap to multiple lines. Ellipses may indicate another Dialog, Modal or pop-up may appear if clicked.

• Dialog is a container component only and does not manage focus or keyboard interaction.
  • For interactive overlay content requiring focus management, use Modal instead.
• Ensure content within the dialog container follows accessibility best practices.
  • Include proper heading structure and semantic HTML.
  • Ensure sufficient color contrast for text and interactive elements.

The <bolt-dialog> component:

• Does not include ARIA attributes by default, as it is a purely presentational container.
• Does not trap focus or manage keyboard navigation.
• Provides a consistent visual surface for content presentation.

None at this time.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.