@usevyre/react @usevyre/vue

Toast

Imperative notification system. Call toast() from anywhere in your app — no prop drilling required. Messages stack in the top-right corner and auto-dismiss after 4 seconds.

Setup

React: wrap your app root with ToastProvider once. Vue: place ToastViewport once in your app root or layout component.

// 1. Wrap your app root once
import { ToastProvider } from "@usevyre/react";

<ToastProvider>
  <App />
</ToastProvider>

<!-- 1. Place ToastViewport once in your app root (App.vue or layout) -->
<script setup>
import { ToastViewport } from "@usevyre/vue";
</script>
<template>
  <RouterView />
  <ToastViewport />
</template>

Usage

Call useToast() inside any component to get the toast() function.

import { useToast } from "@usevyre/react";

function SaveButton() {
  const { toast } = useToast();
  return (
    <Button onClick={() => toast({ title: "Saved!", variant: "success" })}>
      Save
    </Button>
  );
}

<script setup>
import { useToast } from "@usevyre/vue";
const { toast } = useToast();
</script>
<template>
  <Button @click="toast({ title: 'Saved!', variant: 'success' })">
    Save
  </Button>
</template>

Variants & options

toast({ title: "Saved",            variant: "success" });
toast({ title: "Heads up",         variant: "warning" });
toast({ title: "Something failed", variant: "danger" });
toast({ title: "FYI",              variant: "default" });

// With description
toast({
  title: "Deployment complete",
  description: "v1.2.0 is now live.",
  variant: "success",
});

// Stays until dismissed
toast({ title: "Processing…", duration: Infinity });

// same API — useToast() returns { toast, dismiss }
toast({ title: "Saved",            variant: "success" });
toast({ title: "Heads up",         variant: "warning" });
toast({ title: "Something failed", variant: "danger" });

toast({
  title: "Deployment complete",
  description: "v1.2.0 is now live.",
  variant: "success",
});

toast() options

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Primary message shown in bold.
`description`	`string`	`—`	Secondary detail text below the title.
`variant`	`"default" \| "success" \| "warning" \| "danger"`	`"default"`	Colour style.
`duration`	`number`	`4000`	Auto-dismiss delay in ms. Pass Infinity to keep until dismissed.

AI Context

Valid props

Prop	Values	Default
`variant`	`"default"`\|`"success"`\|`"warning"`\|`"danger"`	`default`

Common AI mistakes

Rendering <Toast> directly in JSX→ Use: const { toast } = useToast(); then toast({ title, variant })
variant="error"→ Use variant="danger"
variant="info"→ Use variant="default"

Quick examples

Trigger a success toast

const { toast } = useToast();

<Button onClick={() => toast({ title: 'Saved!', variant: 'success', duration: 3000 })}>
  Save
</Button>

Setup: wrap app with ToastProvider

<ToastProvider>
  <App />
</ToastProvider>

← Tabs Tooltip →