Toasts

Toasts - Bootstrap 5 & Material Design 2.0 components


Basic example



          <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <strong class="mr-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button type="button" class="ml-2 my-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
          </div>

        

Colors



      <!-- Info toast -->
      <div class="toast bg-info text-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-info text-white">
          <i class="fas fa-info-circle fa-lg mr-2"></i>
          <strong class="mr-auto">MDBootstrap</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 my-1 close text-white" data-dismiss="toast"
            aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>

      <!-- Warning toast -->
      <div class="toast bg-warning text-white" role="alert" aria-live="assertive"
        aria-atomic="true">
        <div class="toast-header bg-warning text-white">
          <i class="fas fa-exclamation-triangle fa-lg mr-2"></i>
          <strong class="mr-auto">MDBootstrap</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 my-1 close text-white" data-dismiss="toast"
            aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>

      <!-- Success toast -->
      <div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-success text-white">
          <i class="fas fa-check fa-lg mr-2"></i>
          <strong class="mr-auto">MDBootstrap</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 my-1 close text-white" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>

      <!-- Danger toast -->
      <div class="toast bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-danger text-white">
          <i class="fas fa-exclamation-circle fa-lg mr-2"></i>
          <strong class="mr-auto">MDBootstrap</strong>
          <small>11 mins ago</small>
          <button type="button" class="ml-2 my-1 close text-white" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message.
        </div>
      </div>

      

Toasts - API


Usage

Via JavaScript:


          var toastElList = [].slice.call(document.querySelectorAll('.toast'))
          var toastList = toastElList.map(function (toastEl) {
            return new mdb.Toast(toastEl, option)
          })
        

Making popovers work for keyboard and assistive technology users

To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on hover as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.

While you can insert rich, structured HTML in popovers with the html option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the aria-describedby attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.

Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the whiteList or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing TAB will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.


Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
content number 500 Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Method Description
show Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.
hide Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.
dispose Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

        var exampleTriggerEl = document.getElementById('example')
        var toast = new mdb.Toast(exampleTriggerEl)
        toast.show()
      

Events

Event type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast This event is fired immediately when the hide instance method has been called.
hidden.bs.toast This event is fired when the toast has finished being hidden from the user.

          var myToastEl = document.getElementById('myToast')
          myToastEl.addEventListener('hidden.bs.toast', function () {
            // do something...
          })
        

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


          import { Toast } from 'mdb-ui-kit';