You may not love them, but modals are sometimes requested by customers...


        <p>Hello world!</p>
        <button data-dialog-dismiss>Close</button>

<button id="show-modal">Show modal</button>

<script type="text/javascript">
    window.addEventListener("WebComponentsReady", function() {
        var showModalButton = document.getElementById('show-modal');
        showModalButton.addEventListener('click', function() {
        }, false);

As you can see, you must wrap your dialog content with a <b-dialog-content>. This is sadly necessary to enable classy dialog appearances using CSS transform transitions instead of dirty JS hacks.

A <b-dialog> is hidden by default, you must open it by calling its show() or showModal() method. But you can make it dismissable without any JS by adding a dialog-dismiss or data-dialog-dismiss attribute to any link or button inside the dialog content.


role="dialog" and aria-hidden="..." attributes will be automatically added to the <b-dialog> element, but you must add yourself aria-labelledby="..." (referencing the dialog title) to the element, and role="document" to the dialog content. Focus "grab" will be automatically handled.



  • show() / open(): opens the dialog.
  • hide() / close(): closes the dialog.
  • showModal(): opens the dialog in a modal way (with an overlay).


  • b-dialog-close: fired when the dialog is closed.
  • b-dialog-cancel: cancelable event fired when the dialog is dismissed by using the ESC key.