Toasts

Overview

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Things to know when using the toast plugin:

• Toasts are opt-in for performance reasons, so you must initialize them yourself.

Examples

Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

personBootstrap11 mins agoHello, world! This is a toast message.

Web Component

  <uxf-toast show>    <uxf-icon slot="header" class="text-primary me-2">person</uxf-icon>    <strong slot="header" class="me-auto">Bootstrap</strong>    <small slot="header">11 mins ago</small>    <uxf-close-button slot="header"></uxf-close-button>    Hello, world! This is a toast message.  </uxf-toast>

React

  <UxfToast show>    <UxfIcon slot="header" className="text-primary me-2">person</UxfIcon>    <strong slot="header" className="me-auto">Bootstrap</strong>    <small slot="header">11 mins ago</small>    <UxfCloseButton slot="header"></UxfCloseButton>    Hello, world! This is a toast message.  </UxfToast>

Angular

  <uxf-toast show>    <uxf-icon slot="header" class="text-primary me-2">person</uxf-icon>    <strong slot="header" class="me-auto">Bootstrap</strong>    <small slot="header">11 mins ago</small>    <uxf-close-button slot="header"></uxf-close-button>    Hello, world! This is a toast message.  </uxf-toast>

Live

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.

personBootstrap11 mins agoHello, world! This is a toast message.

Toggle Toast

Web Component

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">    <uxf-toast id="toastLive" autodismiss="3">      <uxf-icon slot="header" class="text-primary me-2">person</uxf-icon>      <strong slot="header" class="me-auto">Bootstrap</strong>      <small slot="header">11 mins ago</small>      <uxf-close-button slot="header"></uxf-close-button>      Hello, world! This is a toast message.    </uxf-toast>  </div>  <uxf-button id="buttonToastLive" variant="primary">Show live toast</uxf-button><br/>
  <script>    const buttonToastLive = document.getElementById('buttonToastLive');    buttonToastLive.addEventListener('click', function (event) {      const toastLive = document.getElementById('toastLive');      if (toastLive) {        toastLive.show = true;      } else {        alert ('toast does not exist!');      }    });  </script>

React

export const LiveDemo = () => {      const toastRef = React.createRef();   return (    <>      <div className="position-fixed bottom-0 end-0 p-3" style={{zIndex: 5}}>        <UxfToast autodismiss="3" ref={toastRef}>          <UxfIcon slot="header" className="text-primary me-2">person</UxfIcon>          <strong slot="header" className="me-auto">Bootstrap</strong>          <small slot="header">11 mins ago</small>          <UxfCloseButton slot="header"></UxfCloseButton>          Hello, world! This is a toast message.        </UxfToast>      </div>      <UxfButton variant="primary" onClick={ () => { toastRef.current.show = !toastRef.current.show; } }>        Toggle Toast      </UxfButton>    </>  );};
<LiveDemo />

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">      <uxf-toast #toast id="toastLive" autodismiss="3">        <uxf-icon slot="header" class="text-primary me-2">person</uxf-icon>        <strong slot="header" class="me-auto">Bootstrap</strong>        <small slot="header">11 mins ago</small>        <uxf-close-button slot="header"></uxf-close-button>        Hello, world! This is a toast message.      </uxf-toast>    </div>    <uxf-button (click)="toggleToast(toast)" variant="primary">Show live toast</uxf-button><br/>  `})
export class AppComponent {  toggleToast(toast: any)  {    toast.el.show = !toast.el.show;  }}

Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Hello, world! This is a toast message.

Hello, world! This is a toast message.

Web Component

  <uxf-toast-container>    <uxf-toast show>      <div class="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </uxf-toast>    <uxf-toast show>      <div class="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </uxf-toast>  </uxf-toast-container>

React

  <UxfToastContainer>    <UxfToast show>      <div className="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </UxfToast>    <UxfToast show>      <div className="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </UxfToast>  </UxfToastContainer>

Angular

  <uxf-toast-container>    <uxf-toast show>      <div class="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </uxf-toast>    <uxf-toast show>      <div class="d-flex align-items-center justify-content-between">        <span>Hello, world! This is a toast message.</span>        <uxf-close-button></uxf-close-button>      </div>    </uxf-toast>  </uxf-toast-container>

Custom content

Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.

Hello, world! This is a toast message.

Web Component

  <uxf-toast show>    Hello, world! This is a toast message.    <div class="mt-2 pt-2 border-top">      <button type="button" class="btn btn-primary btn-sm">Take action</button>      <button type="button" class="btn btn-secondary btn-sm">Close</button>    </div>  </uxf-toast>

React

  <UxfToast show>    Hello, world! This is a toast message.    <div className="mt-2 pt-2 border-top">      <button type="button" className="btn btn-primary btn-sm">Take action</button>      <button type="button" className="btn btn-secondary btn-sm">Close</button>    </div>  </UxfToast>

Angular

  <uxf-toast show>    Hello, world! This is a toast message.    <div class="mt-2 pt-2 border-top">      <button type="button" class="btn btn-primary btn-sm">Take action</button>      <button type="button" class="btn btn-secondary btn-sm">Close</button>    </div>  </uxf-toast>