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
