Toast

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download toast -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

type ToastVariant = "neutral" | "destructive" | "info" | "warning" | "success";

const args = {
  "variant": "neutral",
  "title": "Saved",
  "description": "Your changes were saved.",
  "action": false,
  "cancel": false,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
const notifyFor = (variant: ToastVariant) =>
  variant === "destructive"
    ? toast.error
    : variant === "success"
      ? toast.success
      : variant === "warning"
        ? toast.warning
        : variant === "info"
          ? toast.info
          : toast;
const fire = () => {
  const options = {
    description: args.description,
    action: args.action
      ? { label: "Action", onClick: () => undefined }
      : undefined,
    cancel: args.cancel
      ? { label: "Cancel", onClick: () => undefined }
      : undefined,
  };
  const notify = notifyFor(args.variant);
  notify(args.title, options);
};
</script>

<template>
  <div><Toast /><Button @click="fire">Show toast</Button></div>
</template>

Examples

Default

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "neutral",
  "title": "Title",
  "description": "Description",
  "action": true,
  "cancel": true,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
// A variant selects the method, exactly as Show code demonstrates.
// `neutral` has no method of its own — it is what a bare `toast()` gives.
const method: Record<string, any> = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
const fire = () =>
  method[(args.variant as string) ?? "neutral"](args.title, {
    description: args.description,
    ...(args.action
      ? {
          action: {
            label: "Action",
            onClick: () => console.log("Action"),
          },
        }
      : {}),
    ...(args.cancel
      ? {
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        }
      : {}),
  });
</script>

<template>
  <div class="h-[200px] flex items-center">
    <!-- The icon comes from the toast's type, configured on the Toast — so each
         variant brings its own without the call naming one. -->
    <Toast />
    <Button variant="tertiary" @click="fire">Show Toast</Button>
  </div>
</template>

With Title Description

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "neutral",
  "title": "Event created",
  "description": "Friday, February 10, 2023 at 5:57 PM",
  "action": false,
  "cancel": false,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
// A variant selects the method, exactly as Show code demonstrates.
// `neutral` has no method of its own — it is what a bare `toast()` gives.
const method: Record<string, any> = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
const fire = () =>
  method[(args.variant as string) ?? "neutral"](args.title, {
    description: args.description,
    ...(args.action
      ? {
          action: {
            label: "Action",
            onClick: () => console.log("Action"),
          },
        }
      : {}),
    ...(args.cancel
      ? {
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        }
      : {}),
  });
</script>

<template>
  <div class="h-[200px] flex items-center">
    <!-- The icon comes from the toast's type, configured on the Toast — so each
         variant brings its own without the call naming one. -->
    <Toast />
    <Button variant="tertiary" @click="fire">Show Toast</Button>
  </div>
</template>

With Action

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "neutral",
  "title": "Title",
  "description": "Description",
  "action": true,
  "cancel": true,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
// A variant selects the method, exactly as Show code demonstrates.
// `neutral` has no method of its own — it is what a bare `toast()` gives.
const method: Record<string, any> = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
const fire = () =>
  method[(args.variant as string) ?? "neutral"](args.title, {
    description: args.description,
    ...(args.action
      ? {
          action: {
            label: "Action",
            onClick: () => console.log("Action"),
          },
        }
      : {}),
    ...(args.cancel
      ? {
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        }
      : {}),
  });
</script>

<template>
  <div class="h-[200px] flex items-center">
    <!-- The icon comes from the toast's type, configured on the Toast — so each
         variant brings its own without the call naming one. -->
    <Toast />
    <Button variant="tertiary" @click="fire">Show Toast</Button>
  </div>
</template>

Destructive

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "destructive",
  "title": "Something went wrong",
  "description": "Please try again.",
  "action": true,
  "cancel": false,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
// A variant selects the method, exactly as Show code demonstrates.
// `neutral` has no method of its own — it is what a bare `toast()` gives.
const method: Record<string, any> = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
const fire = () =>
  method[(args.variant as string) ?? "neutral"](args.title, {
    description: args.description,
    ...(args.action
      ? {
          action: {
            label: "Action",
            onClick: () => console.log("Action"),
          },
        }
      : {}),
    ...(args.cancel
      ? {
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        }
      : {}),
  });
</script>

<template>
  <div class="h-[200px] flex items-center">
    <!-- The icon comes from the toast's type, configured on the Toast — so each
         variant brings its own without the call naming one. -->
    <Toast />
    <Button variant="tertiary" @click="fire">Show Toast</Button>
  </div>
</template>

Success

<script setup lang="ts">
import { toast } from "@/components/ui/toast";
import { Toast } from "@/components/ui/toast";
import { Button } from "@/components/ui/button";

const args = {
  "variant": "success",
  "title": "Saved",
  "description": "Your changes were saved.",
  "action": false,
  "cancel": false,
} satisfies Record<string, unknown> & {
  variant?: "neutral" | "destructive" | "info" | "warning" | "success";
};
// A variant selects the method, exactly as Show code demonstrates.
// `neutral` has no method of its own — it is what a bare `toast()` gives.
const method: Record<string, any> = {
  neutral: toast,
  success: toast.success,
  destructive: toast.error,
  warning: toast.warning,
  info: toast.info,
};
const fire = () =>
  method[(args.variant as string) ?? "neutral"](args.title, {
    description: args.description,
    ...(args.action
      ? {
          action: {
            label: "Action",
            onClick: () => console.log("Action"),
          },
        }
      : {}),
    ...(args.cancel
      ? {
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        }
      : {}),
  });
</script>

<template>
  <div class="h-[200px] flex items-center">
    <!-- The icon comes from the toast's type, configured on the Toast — so each
         variant brings its own without the call naming one. -->
    <Toast />
    <Button variant="tertiary" @click="fire">Show Toast</Button>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.