# 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();
    }
  });
})();
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/toasts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.