Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

On this page

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.

Overview

Toasts will automatically hide if you do not specify autohide: false.

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.

tip

Previously, our scripts dynamically added the hide attribute to completely hide a toast (with display:none, rather than just with opacity:0). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.

vue

Live example

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

vue

Translucent

Toasts are slightly translucent to blend in with what's below them.

vue

Stacking

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

vue

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 ToastHeader component, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.

vue

Alternatively, you can also add additional controls and components to toasts.

vue

Color schemes

Building on the above example, you can create different toast color schemes with our color and background utilities.

Here we've added .bg-primary and text-color="white" attribute to the Toast component.

For a crisp edge, we remove the default border with border="0" attribute.

vue

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

If you're only ever going to show one toast at a time, put the positioning styles right on the Toast component.

vue

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

vue

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

vue
vue

While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts.

Even if you give the toast a long delay timeout , keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed).

If you absolutely must have further controls, we recommend using a toast with autohide: false.

On this page