Dialog

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. The dialog should have a clear and concise title that describes its purpose. The content of the dialog should be easy to read and understand, and should include clear call-to-action buttons.

Example

open dialog

code

<bp-button id="btn">open dialog</bp-button>
<bp-dialog hidden modal closable trigger="btn">
  <h2 slot="header" bp-text="section">Dialog Header</h2>
  <p bp-text="content">dialog content</p>
  <div slot="footer" bp-layout="inline gap:xs inline:end">
    <bp-button action="outline">Cancel</bp-button>
    <bp-button>Save</bp-button>
  </div>
</bp-dialog>

<script type="module">
  import '@blueprintui/components/include/dialog.js';
  import '@blueprintui/components/include/button.js';

  const dialog = document.querySelector('bp-dialog');
  dialog.addEventListener('close', () => (dialog.hidden = true));
  dialog.addEventListener('open', () => (dialog.hidden = false));
</script>

Small

open small dialog

code

<bp-button id="btn-small-dialog">open small dialog</bp-button>
<bp-dialog hidden modal closable trigger="btn-small-dialog" size="sm">
  <h2 slot="header" bp-text="section">Size Small</h2>
  <p bp-text="content">dialog content</p>
  <div slot="footer" bp-layout="inline gap:xs inline:end">
    <bp-button action="outline">Cancel</bp-button>
    <bp-button>Save</bp-button>
  </div>
</bp-dialog>

<script type="module">
  import '@blueprintui/components/include/dialog.js';
  import '@blueprintui/components/include/button.js';

  const dialog = document.querySelector('bp-dialog[size=sm]');
  dialog.addEventListener('close', () => (dialog.hidden = true));
  dialog.addEventListener('open', () => (dialog.hidden = false));
</script>

Large

open large dialog

code

<bp-button id="btn-large-dialog">open large dialog</bp-button>
<bp-dialog hidden modal closable trigger="btn-large-dialog" size="lg">
  <h2 slot="header" bp-text="section">Size Large</h2>
  <p bp-text="content">dialog content</p>
  <div slot="footer" bp-layout="inline gap:xs inline:end">
    <bp-button action="outline">Cancel</bp-button>
    <bp-button>Save</bp-button>
  </div>
</bp-dialog>

<script type="module">
  import '@blueprintui/components/include/dialog.js';
  import '@blueprintui/components/include/button.js';

  const dialog = document.querySelector('bp-dialog[size=lg]');
  dialog.addEventListener('close', () => (dialog.hidden = true));
  dialog.addEventListener('open', () => (dialog.hidden = false));
</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

Properties

Name	Types	Description
`size`	`'sm' \| 'md' \| 'lg'`
`position`	`Position`
`closable`	`boolean`
`trigger`	`HTMLElement \| string`
`modal`	`boolean`
`i18n`
`hidden`	`boolean`

Attributes

Name	Types	Description
`size`	`'sm' \| 'md' \| 'lg'`
`position`	`Position`
`closable`	`boolean`
`trigger`	`HTMLElement \| string`
`modal`	`boolean`
`i18n`
`hidden`	`boolean`

CSS Properties

Name	Types	Description
`--padding`
`--filter`
`--background`
`--color`
`--width`
`--height`
`--min-width`
`--min-height`
`--font-size`
`--internal-offset-margin`
`--animation-duration`

Slots

Name	Types	Description
`default`		slot for dialog content
`header`		slot for dialog header
`footer`		slot for dialog footer