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
