BwModal | bw-modal

Overview

Modals are used to display content in a floating overlay at the center of the screen.

Usage

Basic

Open Modal

Hello

<bw-modal>
  <bw-button slot="trigger">Open Modal</bw-button>
  <div slot="content">
    <p>Hello</p>
  </div>
</bw-modal>

Properties

Property	Attribute	Description	Type	Default
backdropDismiss	backdrop-dismiss	Backdrop will close the modal on click when enabled	boolean	true
destroy	destroy	Execute a callback after the modal has dismissed	() => void | Promise<void>	undefined
init	init	Execute a callback before the modal starts presenting	() => void | Promise<void>	undefined
open	open	Opens and closes modal	boolean	false
size	size	The size of the modal	"lg" | "md" | "sm" | "xl" | "xs"	'md'

Events

Event	Description	Type
modalDismiss	Emits whenever the modal has finished closing. Emits the role and optional data object passed to the closeModal() method.	CustomEvent<{ role?: string; data?: any; }>
modalPresent	Emits whenever the modal has opened. Does not emit any data	CustomEvent<any>
ready	Emits when the popover has completed it's initial render	CustomEvent<any>

Methods

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

Dismisses the modal

Parameters

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

Returns

Type: Promise<void>

present() => Promise<void>

Presents the modal

Returns

Type: Promise<void>

Slots

Slot	Description
"content"	The content of the modal
"footer"	The footer of the modal
"header"	The header of the modal
"trigger"	The trigger for the modal

Shadow Parts

Part	Description
"dialog"	The dialog element of the modal
"inner-container"	The inner container of the dialog element

CSS Custom Properties

Name	Description
--background	The background color of the modal
--border	The border of the modal
--color	The color of the modal
--radius	The radius of the modal

Dependencies

Used by

• bw-dialog

Graph

---

© 2025 United Systems & Software - All Rights Reserved.