> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/38.toast.md).

# Toast

### Toast Props <a href="#toast-props" id="toast-props"></a>

| Name                | Type                          | Default                                           | Description                                                                    |
| ------------------- | ----------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------ |
| colors              | object                        |                                                   | Object with Tailwind CSS colors classes                                        |
| colors.bgIos        | string                        | 'bg-black'                                        |                                                                                |
| colors.bgMaterial   | string                        | 'bg-md-light-surface-5 dark:bg-md-dark-surface-5' |                                                                                |
| colors.textIos      | string                        | 'text-white'                                      |                                                                                |
| colors.textMaterial | string                        | 'text-md-light-primary dark:text-md-dark-primary' |                                                                                |
| component           | string                        | 'div'                                             | Component's HTML Element                                                       |
| opened              | boolean                       | false                                             | Allows to open/close Toast and set its initial state                           |
| position            | 'left' \| 'right' \| 'center' | 'left'                                            | Toast position (only on wide screens). Can be `left`, `center` or `right`      |
| translucent         | boolean                       | true                                              | Makes Toast background translucent (with `backdrop-filter: blur`) in iOS theme |

### Toast Slots

| Name   | Description          |
| ------ | -------------------- |
| button | Toast button content |

### Examples

{% tabs %}
{% tab title="Vue" %}

```vue
<template>
  <i-page>
    <i-navbar title="Toast" />

    <i-block strong-ios outline-ios class="space-y-4">
      <i-toast position="left" :opened="opened.left">
        <template #button>
          <i-button clear inline @click="() => (opened.left = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is left toast!</div>
      </i-toast>
      <i-toast position="center" :opened="opened.center">
        <template #button>
          <i-button clear inline @click="() => (opened.center = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is center toast!</div>
      </i-toast>
      <i-toast position="right" :opened="opened.right">
        <template #button>
          <i-button clear inline @click="() => (opened.right = false)">
            Close
          </i-button>
        </template>
        <div class="shrink">Hello this is right toast!</div>
      </i-toast>
      <p>
        Toasts provide brief feedback about an operation through a message on
        the screen.
      </p>
      <p>
        <i-button @click="() => openToast('left')"> Toast on Left </i-button>
      </p>
      <p>
        <i-button @click="() => openToast('center')">
          Toast on Center
        </i-button>
      </p>
      <p>
        <i-button @click="() => openToast('right')"> Toast on Right </i-button>
      </p>
    </i-block>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iButton,
    iToast,
    iBlock,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iButton,
      iToast,
      iBlock,
    },
    setup() {
      const opened = ref({
        left: false,
        center: false,
        right: false,
      });
      const openToast = (side) => {
        // close other toast
        opened.value = { left: false, center: false, right: false };
        opened.value[side] = true;
      };
      return {
        openToast,
        opened,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Toast,
  Block,
} from 'ina-ui/react';

export default function ToastPage() {
  const [toastLeftOpened, setToastLeftOpened] = useState(false);
  const [toastCenterOpened, setToastCenterOpened] = useState(false);
  const [toastRightOpened, setToastRightOpened] = useState(false);

  const openToast = (setter) => {
    // close other toast
    setToastLeftOpened(false);
    setToastCenterOpened(false);
    setToastRightOpened(false);
    setter(true);
  };
  return (
    <Page>
      <Navbar
        title="Toast"
        />

      <Block strongIos outlineIos className="space-y-4">
        <Toast
          position="left"
          opened={toastLeftOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastLeftOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is left toast!</div>
        </Toast>
        <Toast
          position="center"
          opened={toastCenterOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastCenterOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is center toast!</div>
        </Toast>
        <Toast
          position="right"
          opened={toastRightOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastRightOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is right toast!</div>
        </Toast>
        <p>
          Toasts provide brief feedback about an operation through a message on
          the screen.
        </p>
        <p>
          <Button onClick={() => openToast(setToastLeftOpened)}>
            Toast on Left
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastCenterOpened)}>
            Toast on Center
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastRightOpened)}>
            Toast on Right
          </Button>
        </p>
      </Block>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/38.toast.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.