# V toast 9

> Timeout Control

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-toast-9).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-toast-9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-toast-9-light-6cd5ff43e411efd7.png
- Registry item: https://ui.cnippet.dev/r/v-toast-9.json
- Categories: toast
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-toast-9.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/toast`

## Files

### `registry/default/variants/v-toast-9.tsx`

```tsx
"use client";

import { useRef } from "react";
import { Button } from "@/registry/default/ui/button";
import { toastManager } from "@/registry/default/ui/toast";

export function Pattern() {
  const persistentIdRef = useRef<string | null>(null);

  function showPersistent() {
    if (persistentIdRef.current) return;
    persistentIdRef.current = toastManager.add({
      actionProps: {
        children: "Dismiss",
        onClick: () => {
          if (persistentIdRef.current) {
            toastManager.close(persistentIdRef.current);
            persistentIdRef.current = null;
          }
        },
      },
      description: "This toast stays until you dismiss it manually.",
      timeout: 0,
      title: "Persistent notification",
      type: "warning",
    });
  }

  function showTimed(ms: number) {
    toastManager.add({
      description: `This toast auto-dismisses after ${ms / 1000}s.`,
      timeout: ms,
      title: `Auto-dismiss in ${ms / 1000}s`,
      type: "info",
    });
  }

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button onClick={() => showTimed(3000)} variant="outline">
        3s toast
      </Button>
      <Button onClick={() => showTimed(8000)} variant="outline">
        8s toast
      </Button>
      <Button onClick={showPersistent} variant="outline">
        Persistent toast
      </Button>
    </div>
  );
}
```