---
title: Toast
description: A transient message with an optional action, shown one at a time.
---
import Source from './_generated/toast.mdx';

A transient message that appears briefly, optionally with a single action (the undo/snackbar pattern). Toasts follow MD3 snackbar semantics — one at a time, additional toasts queue.

<DemoFrame component="toast" height={560} />

## Installation

```bash
npx touchcn add toast
```

## Usage

Mount the `<tcn-toaster />` outlet once near your app root, then trigger toasts imperatively from anywhere.

:::warning Mount the outlet at the app root

Render `<tcn-toaster />` in your **root component** (Angular `AppComponent` template) or **root layout** (React) — never inside a routed page. The toast store is global, so a toast triggered on one screen must outlive navigation to another. If the outlet lives inside a page, it unmounts on navigation and the toast vanishes with it.

:::

<CodeGroup>

```ts Angular
import { TouchcnToast } from '@touchcn/angular/toast';

export class Example {
  private readonly toast = inject(TouchcnToast);

  archive() {
    this.toast.show({
      message: 'Conversation archived',
      action: { label: 'Undo', onClick: () => this.restore() },
    });
  }
}
```

```tsx React
import { toast } from '@touchcn/react';
import { TcnToaster } from '@/components/ui/toast';

// Render once near the app root:
<TcnToaster />;

// Trigger from anywhere:
toast({
  message: 'Conversation archived',
  action: { label: 'Undo', onClick: () => restore() },
});
```

```vue Vue
<script setup lang="ts">
import { toast } from '@touchcn/vue';
import { TcnToaster } from '@/components/ui/toast';

// Trigger from anywhere:
function archive() {
  toast({
    message: 'Conversation archived',
    action: { label: 'Undo', onClick: () => restore() },
  });
}
</script>

<template>
  <!-- Render once near the app root: -->
  <TcnToaster />
</template>
```

</CodeGroup>

## API

| Member         | Type                                                        | Description                                        |
| -------------- | ----------------------------------------------------------- | -------------------------------------------------- |
| `show` / `toast` | `(options) => { dismiss(): void }`                        | Enqueue a toast; returns a dismiss handle.         |
| `message`      | `string`                                                    | The message text.                                  |
| `action`       | `{ label: string; onClick?: () => void }`                   | Optional action button.                            |
| `duration`     | `number`                                                    | Auto-dismiss delay in ms (`0` disables). Default `4000`. |

<Source />