Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                toast: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})
NameDescription
.toastBase class of the toast component
.toast > .toast-headerBase class of the header wrapper within the toast element
.toast > .toast-bodyBase class of the body wrapper within the toast element
Customize variables at:/library/extend/components/_toast.scss
Component's defaults:/library/components/toast/_defaults.scss
NameDefault valueNote
$toast-max-width350px
$toast-padding-x.75rem
$toast-padding-y.5rem
$toast-font-size.875rem
$toast-colorproperty.get(toast-color)Requires @use "@library/sass/modules/property";
$toast-background-colorproperty.get(toast-background-color)Requires @use "@library/sass/modules/property";
$toast-border-width1px
$toast-border-colorproperty.get(toast-border-color)Requires @use "@library/sass/modules/property";
$toast-border-radius$border-radius
$toast-box-shadow$box-shadow
$toast-spacing$container-padding-x
$toast-header-colorproperty.get(toast-header-color)Requires @use "@library/sass/modules/property";
$toast-header-background-colorproperty.get(toast-header-background-color)Requires @use "@library/sass/modules/property";
$toast-header-border-colorproperty.get(toast-header-border-color)Requires @use "@library/sass/modules/property";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}