BwDialog | bw-dialog

Overview

Dialog is a modal that is a little smaller and fits to it's contents. It has convenience options for capturing a quick user interaction.

This is one of 2 components that do not use the shadow dom. The other component is BwForm. They both rely on the native form element, which can be tricky to use in the shadow dom, so instead they use scoped css.

Usage

Buttons and Inputs

Use the buttons and controls properties to pass in buttons and inputs.

Open Dialog

Typescript

const dialog = document.querySelector('#dialogTrigger')!;
dialog.buttons = [
  {
    color: 'gray',
    variant: 'tertiary',
    text: 'Cancel'
  },
  {
    type: 'submit',
    variant: 'secondary',
    text: 'Submit'
  }
]
dialog.controls = [
  {
    label: 'Name',
    required: true,
    placeholder: "What's your name?"
  },
  {
    label: 'Age',
    placeholder: 'How old are you?'
  }
]

HTML

<bw-dialog header="Hello there!" message="Tell me about yourself." id="dialogTrigger">
  <bw-button slot="trigger">Open Dialog</bw-button>
</bw-dialog>

Events

Internally, BwDialog uses BwModal, so you can listen for the modalPresent and modalDismiss events on the dialog element.

Additionally, if you pass in buttons and controls, a form will be rendered in the dialog, so you can listen for submit on the dialog element as well.

Presenting

You can use the trigger slot to pass in an element that will open the dialog on click.

Open Dialog

<bw-dialog header="Hello world!" message="This is an important message.">
  <bw-button slot="trigger">Open Dialog</bw-button>
</bw-dialog>

---

You can also use the createDialog convenience function to create them programmatically.

Open Dialog

Typescript

import { createDialog } from 'bluewater';

document.querySelector('#dialogTrigger')?.addEventListener('click', () => {
  const dialog = createDialog({
    header: 'Test Dialog Header',
    message: 'Test message',
    icon: 'home',
    buttons: [
      {
        text: 'Cancel',
        color: 'red',
        variant: 'primary',
        handler: el => el.dismiss()
      },
      {
        text: 'Submit',
        color: 'blue',
        variant: 'primary'
      },
    ],
    backdropDismiss: true,
    showBackdrop: true
  });
  dialog.present();
})

HTML

<bw-button id="dialogTrigger">Open Dialog</bw-button>

Properties

Property	Attribute	Description	Type	Default
backdropDismiss	backdrop-dismiss	Whether or not the user can close the dialog by clicking the backdrop	boolean	true
buttons	buttons	Buttons to go in the dialog	DialogButton[]	[]
controls	controls	Inputs to go in the dialog	DialogControl[]	[]
header	header	Title of the dialog	string	undefined
icon	icon	Icon that goes to the left of the header	string	undefined
message	message	Message text below the title	string	undefined
subheader	subheader	Sub title of the dialog	string	undefined

Events

Event	Description	Type
dialogDismiss	Emits whenever the modal has finished closing. Emits the role and optional data object passed to the closeModal() method.	CustomEvent<{ role?: string; data?: any; }>
dialogPresent	Emits whenever the modal has opened. Does not emit any data	CustomEvent<any>

Methods

dismiss(role?: string, data?: any) => Promise<void>

Dismisses the dialog

Parameters

Name	Type	Description
role	string	- The role of the dismiss
data	any	- The data of the dismiss

Returns

Type: Promise<void>

present() => Promise<void>

Presents the dialog

Returns

Type: Promise<void>

Slots

Slot	Description
"close"	The close element
"content"	Placed below the headers and message
"header"	The header element
"header-container"	The header container element
"icon"	The icon element
"message"	The message element
"subheader"	The subheader element
"trigger"	The trigger element

Dependencies

Depends on

• bw-modal
• bw-icon-button
• bw-icon
• bw-form
• bw-input
• bw-button

Graph

---

© 2025 United Systems & Software - All Rights Reserved.