> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Toast

> A dismissible notification that appears temporarily.

```tsx theme={null}
import { Toast, ToastProvider, ToastViewport } from "@fanvue/ui";
import type {
  ToastProps,
  ToastProviderProps,
  ToastVariant,
  ToastViewportProps,
} from "@fanvue/ui";
```

## Examples

## Without Description

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-toast--without-description&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Toast — Without Description" />
</Frame>

```tsx theme={null}
import { Toast } from "@fanvue/ui";

<Toast variant="info" title="Info message" open />
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-toast--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Toast — All Variants" />
</Frame>

```tsx theme={null}
import { Toast } from "@fanvue/ui";

<div className="flex flex-col gap-3">
  {(["info", "warning", "success", "error", "messageToast"] as const).map((variant) => (
    <Toast
      key={variant}
      open
      variant={variant}
      title={variant}
      description={`This is a ${variant} message`}
    />
  ))}
</div>
```

## Without Title

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-toast--without-title&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Toast — Without Title" />
</Frame>

```tsx theme={null}
import { Toast } from "@fanvue/ui";

<Toast variant="success" description="Operation completed successfully" open />
```

## With Action

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-toast--with-action&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Toast — With Action" />
</Frame>

```tsx theme={null}
import { Toast } from "@fanvue/ui";

<Toast
  variant="info"
  title="Update available"
  description="A new version is available"
  onActionClick={() => {
    console.log("Action clicked");
  }}
  actionLabel="Update"
  open
/>
```

## Without Close

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-toast--without-close&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Toast — Without Close" />
</Frame>

```tsx theme={null}
import { Toast } from "@fanvue/ui";

<Toast
  variant="success"
  title="Success"
  description="Operation completed"
  showClose={false}
  open
/>
```

## Props

## Toast

A dismissible notification that appears temporarily. Supports `info`, `warning`, `success`, `error`, and `messageToast` variants with optional action button, close control, and avatar.

Use inside a `ToastProvider` with a `ToastViewport`.

<ParamField path="actionLabel" type="string" default="Action">
  Label for the optional action button.
</ParamField>

<ParamField path="asChild" type="boolean" />

<ParamField path="avatarAlt" type="string">
  Alt text for the avatar image.
</ParamField>

<ParamField path="avatarFallback" type="string">
  Fallback content for the avatar (e.g. initials).
</ParamField>

<ParamField path="avatarSrc" type="string">
  Avatar image URL (used by the `messageToast` variant).
</ParamField>

<ParamField path="closeLabel" type="string" default="Close notification">
  Accessible label for the close button.
</ParamField>

<ParamField path="description" type="ReactNode">
  Description or body content displayed below the title.
</ParamField>

<ParamField path="onActionClick" type="(() => void)">
  Click handler for the action button. When provided, the action button is rendered.
</ParamField>

<ParamField path="showClose" type="boolean" default="true">
  Whether to show the close button.
</ParamField>

<ParamField path="title" type="string">
  Title text displayed in bold at the top of the toast.
</ParamField>

<ParamField path="variant" type="&#x22;info&#x22; | &#x22;success&#x22; | &#x22;warning&#x22; | &#x22;error&#x22; | &#x22;messageToast&#x22;" default="info">
  Visual/semantic variant of the toast.
</ParamField>

## ToastProvider

Provides toast context. Wrap your application (or a subtree) with this provider.

Takes no props of its own beyond the standard attributes of the element it renders.

## ToastViewport

Fixed-position container that renders active toasts. Place once at the root of your app.

Accepts all props of the underlying Radix `ToastPrimitive.Viewport` primitive, plus `className`.

## Exported types

Also exported from `@fanvue/ui`: `ToastProps`, `ToastProviderProps`, `ToastVariant`, `ToastViewportProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)