Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Considerations:
  • Usage

Was this helpful?

  1. Components

Toasts

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

PreviousTextareaNextTooltips

Last updated 9 months ago

Was this helpful?

Considerations:

  • Comment out the toasts initialization if you are not using them in _bootstrap.js

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

Usage

Example #1: Trigger the toasts

First create a button to trigger the toast:

{% include 'radix:button' with {
  color: 'primary',
  content: "Show live toast",
  id: 'liveToastBtn',
} %}

Then include your main toast:

{% include 'radix:toasts' with {
  with_wrapper: true,
  with_container: true,
  container_classes: 'position-fixed bottom-0 end-0 p-3',
  toasts: [
    {
      header: {
        title: 'Radix Toast Title',
        subtitle: '11 mins ago',
        classes: 'text-primary bg-light'
      },
      body: 'This is the first toast message.',
      role: 'alert',
      autohide: false,
      with_body_wrapper: false,
      with_close: true,
      delay: 10000,
      attributes: {
        'class': ['extra-toast-class'],
        'id': 'liveToast'
      },
      additional_buttons: [
        {
          text: 'Action 1',
          color: 'secondary',
          outline: true,
          button_utility_classes: ['me-2'],
        },
        {
          text: 'Action 2',
          color: 'success',
          outline: false,
          button_utility_classes: ['me-2'],
        }
      ]
    }
  ],
} %}

Then you should also trigger the toasts with JS like so (Already in _toast-init.js but commented out):

import { Toast } from "./_bootstrap";

(() => {
  const toastTrigger = document.getElementById('liveToastBtn');
  const toastLiveExample = document.getElementById('liveToast');
  
  if (toastTrigger) {
    const toastBootstrap = Toast.getOrCreateInstance(toastLiveExample);
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show();
    });
  }
})();

Example #2: Run toasts on page load

For running the toasts on page load, you just need to change the JS approach (Already in _toast-init.js):

(() => {
  document.addEventListener("DOMContentLoaded", () => {
    const toastElList = [...document.querySelectorAll(".toast")];
    for (const toastEl of toastElList) {
      const toast = new Toast(toastEl);
      toast.show();
    }
  });
})();
Bootstrap docs