Toast component
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. 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.
A very basic example of toast. Keep in mind that for performance
reasons you must initialize them yourself. Also toasts will automatically hide
if you don't specify autohide: false
Our default close button can be used either in toast
header or body. You can also use any element or button type with
data-bs-dismiss="toast" attribute to close the toast
Depending on toast location and overall component styling, you can
show toasts with fully rounded corners. Just add .rounded-pill
class to the base .toast container
You can also use regular buttons as alternative to "times" icon.
Here we moved the button outside .toast-body so that is fills all
available height and wrapped all content in flex container
Toast headers use display: flex, allowing easy
alignment of content thanks to our margin and flexbox utilities. Altough header
is optional, it's recommended for better user experience
The right side in the header is usually reserved for some secondary
text or action links, and is the default location of dismiss button. Use button
with .btn-close within header container
Toast header text supports contextual icons in any alignment, style and color. Just add icon markup and control the distance between icons and text with our margin utility classes
You can also use spinner component to visually indicate the loading
state. Use our regular spinner markup inside .toast-header
container before/after text and margin utility classes
If you need to show a time stamp or any other text, just add to the
header container. Additionally wrap header text in container with
.me-auto to push all other content to the right
Alternatively you can also show badge instead of helper text. The logic here is the same, and badge supports all styles and colors. Multiple badgeas are also supported
Toast supports multiple bodies. Here we added
.border-top to the second .toast-body to disually
separate 2 containers and added regular button to simulate action panel
You can also use multiple buttons to display a group of buttons in our usual toolbar format. You can change button alignment and fully control all styling options via our utility classes
One of the possible options for creating a set of contextual
notifications. Use our color classes in .toast-header container
along with .text-white and .btn-close-white classes
In addition to custom header background, you can also add our color
utility classes .border-[color] to .toast and
.toast-header containers to change the main border color
By default, toast component is designed in a light theme. You can
create different toast color schemes with our color and background utilities.
For a crisp edge, remove the default border with .border-0
You can also use all our 9 colors to create a custom contextual set
of notifications with solid background color. Just use .bg-[color]
and .text-white in .toast container
