> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/toasts.md).

# Toasts

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/toasts/)

### 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:

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

Then include your main toast:

```twig
{% 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):

```js
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`):

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