lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

dialog

dialog Content

code
<bp-button popovertarget="dialog-example">open dialog</bp-button>
<bp-dialog id="dialog-example" 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

open dialog

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

open dialog

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>
open dialog

dialog

dialog Content

close
code
<bp-button popovertarget="dialog-example">open dialog</bp-button>
<bp-dialog id="dialog-example" modal closable>
  <h2 slot="header" bp-text="section">dialog</h2>
  <p bp-text="content">dialog Content</p>
  <bp-button slot="footer" popovertarget="dialog-example">close</bp-button>
</bp-dialog>
<script type="module">
  import '@blueprintui/components/include/dialog.js';
  import '@blueprintui/components/include/button.js';
</script>

Non Modal

open dialog

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

NameTypesDescription
opendispatched when the dialog is opened
closedispatched when the dialog is closed

Properties

NameTypesDescription
size'sm' | 'md' | 'lg'determine the visual size state
positionPositiondetermine the position relative to the viewport
closablebooleandetermine user closable state
triggerHTMLElement | stringthe triggering element that opens the popover
modalbooleandetermine if dialog is modal with a backdrop layer
i18nset default aria/i18n strings

Attributes

NameTypesDescription
size'sm' | 'md' | 'lg'determine the visual size state
positionPositiondetermine the position relative to the viewport
closablebooleandetermine user closable state
triggerHTMLElement | stringthe triggering element that opens the popover
modalbooleandetermine if dialog is modal with a backdrop layer
i18nset default aria/i18n strings

CSS Properties

NameTypesDescription
--padding
--filter
--background
--color
--width
--height
--min-width
--min-height
--font-size
--internal-offset-margin
--animation-duration

Slots

NameTypesDescription
defaultslot for dialog content
headerslot for dialog header
footerslot for dialog footer