Toasts

Toasts are implemented by using the Invoker Commands API on an Alert and setting the data attribute data-placement to one of the following values: top-start, top-center, top-end, middle-start, middle-center, middle-end, bottom-start, bottom-center, bottom-end.

For more details and examples, check out the Alerts documentation since toasts are essentially floating alerts.

Basic Usage

1. Give your HTML element a unique id attribute
2. Add the popover attribute plus the role="status" and data-placement (set with one of the values mentioned above)
3. Create an opening button with popovertarget="your-modal-id" (alternatively, you can use JS to document.querySelector('#your-modal-id').showPopover())
4. Add a Close Button with popovertarget="your-modal-id"

<div style="padding-top: 45px; height: 150px;">
  <button popovertarget="floating-alert" class="contrast">Show Toast</button>
  
  <div id="floating-alert" class="info" data-placement="top-center" popover="popover" role="status">
    <p>Connection established!</p>
    <button aria-label="Close" popovertarget="floating-alert" class="icon-close"></button>
  </div>
</div>

Note: Keep in mind that like alerts, if the content (in this case the <p> element) is empty, the toast will be hidden. Try editing the code above to see how it behaves.