The dialog component is used to display content in a overlay that appears on top of the current view. It is used to display information that requires the user's attention or interaction.
Example
dialog
dialog Content
code
<bp-button popovertarget="dialog">open dialog</bp-button>
<bp-dialog id="dialog" modal closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Small
small dialog
dialog Content
code
<bp-button popovertarget="dialog-small">open dialog</bp-button>
<bp-dialog id="dialog-small" size="sm" modal closable>
<h2 slot="header" bp-text="section">small dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Large
large dialog
dialog Content
code
<bp-button popovertarget="dialog-large">open dialog</bp-button>
<bp-dialog id="dialog-large" size="lg" modal closable>
<h2 slot="header" bp-text="section">large dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Footer
dialog
dialog Content
code
<bp-button popovertarget="dialog-footer-example">open dialog</bp-button>
<bp-dialog id="dialog-footer-example" modal closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
<bp-button slot="footer" action="flat" popovertarget="dialog-footer-example">close</bp-button>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Non Modal
dialog
dialog Content
code
<bp-button popovertarget="dialog-modal">open dialog</bp-button>
<bp-dialog id="dialog-modal" closable>
<h2 slot="header" bp-text="section">dialog</h2>
<p bp-text="content">dialog Content</p>
</bp-dialog>
<script type="module">
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/button.js';
</script>Install
NPM
// npm package
import '@blueprintui/components/include/dialog.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/dialog.js/+esm';
</script>Accessibility
- Provide clear and visible labels for all interactive elements, such as buttons and form fields.
- Ensure that the dialog can be navigated and operated with the keyboard, such as using the tab key to move between elements and the enter or space key to activate buttons.
- Ensure that the dialog is not the only way to access the content or functionality it provides, and that it can be closed easily by the user.
bp-dialog
Events
| Name | Types | Description |
|---|---|---|
open | dispatched when the dialog is opened | |
close | dispatched when the dialog is closed |
Properties
| Name | Types | Description |
|---|---|---|
size | 'sm' | 'md' | 'lg' | Determines the visual size variant of the dialog, affecting width and content scaling |
position | Position | Controls the position of the dialog relative to the viewport |
closable | boolean | Controls whether the dialog displays a close button, allowing users to dismiss it |
modal | boolean | Controls whether the dialog is modal with a backdrop layer that prevents interaction with underlying content |
open | boolean | Controls whether the dialog is visible and open on initialization |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
Attributes
| Name | Types | Description |
|---|---|---|
size | 'sm' | 'md' | 'lg' | Determines the visual size variant of the dialog, affecting width and content scaling |
position | Position | Controls the position of the dialog relative to the viewport |
closable | boolean | Controls whether the dialog displays a close button, allowing users to dismiss it |
modal | boolean | Controls whether the dialog is modal with a backdrop layer that prevents interaction with underlying content |
open | boolean | Controls whether the dialog is visible and open on initialization |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
CSS Properties
| Name | Types | Description |
|---|---|---|
--padding | ||
--filter | ||
--background | ||
--color | ||
--width | ||
--height | ||
--min-width | ||
--min-height | ||
--font-size | ||
--animation-duration |
Slots
| Name | Types | Description |
|---|---|---|
default | slot for dialog content | |
header | slot for dialog header | |
footer | slot for dialog footer |