# Toast

Source: https://iriscss.com/documentation/components/toast/

A short message in the bottom end corner of the screen.

## Single toast

Make the toast a manual popover, so it stays until it is closed. A button with `popovertarget` opens it, and a `.close` button inside dismisses it. From a script, call `showPopover()` and `hidePopover()`.

```html
<button popovertarget="toast-saved" popovertargetaction="show">Save</button>
<div id="toast-saved" class="toast success" popover="manual" role="status">
  <p>Your changes were saved.</p>
  <button class="close" popovertarget="toast-saved" popovertargetaction="hide" aria-label="Close"></button>
</div>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) sets the color. Without one the toast uses the contrast color.

```html
<button popovertarget="toast-default" popovertargetaction="show">Default</button>
<div id="toast-default" class="toast" popover="manual" role="status">
  <p>Link copied.</p>
  <button class="close" popovertarget="toast-default" popovertargetaction="hide" aria-label="Close"></button>
</div>
<button class="danger" popovertarget="toast-error" popovertargetaction="show">Danger</button>
<div id="toast-error" class="toast danger" popover="manual" role="alert">
  <p>The upload failed.</p>
  <button class="close" popovertarget="toast-error" popovertargetaction="hide" aria-label="Close"></button>
</div>
```

## Stacked toasts

To show several at once, add and remove `.toast` elements inside a `.toasts` live region. Screen readers announce each new toast.

```html
<div class="toasts" aria-live="polite"></div>

<script>
  function toast(message, color = "") {
    const item = document.createElement("div");
    item.className = `toast ${color}`;
    item.textContent = message;
    document.querySelector(".toasts").append(item);
    setTimeout(() => item.remove(), 4000);
  }
  toast("Saved", "success");
</script>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-toast-max-width` | `24rem` |  |
| `--i-toast-offset` | `var(--i-spacing)` | Distance from the edges of the viewport |
| `--i-toast-gap` | `calc(var(--i-spacing) * 0.5)` |  |
| `--i-toast-padding-block` | `calc(var(--i-spacing) * 0.75)` |  |
| `--i-toast-padding-inline` | `var(--i-spacing)` |  |
| `--i-toast-duration` | `0.3s` |  |
| `--i-toast-z-index` | `1000` |  |