# P toggle 8

> Bookmark toggle with tooltip and success toast

A shadcn/ui block from the [@coss](https://coss.com/ui) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/coss/p-toggle-8).

- Page, with a live preview: https://shadcn.exchange/r/coss/p-toggle-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/coss/p-toggle-8-light-4b53767dacccd3bd.png
- Registry item: https://coss.com/ui/r/p-toggle-8.json
- Categories: toggle, tooltip, toast
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://coss.com/ui/r/p-toggle-8.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@coss/toggle`, `@coss/tooltip`, `@coss/toast`

## Files

### `registry/default/particles/p-toggle-8.tsx`

```tsx
"use client";

import { BookmarkIcon } from "lucide-react";
import { useRef, useState } from "react";
import { anchoredToastManager } from "@/registry/default/ui/toast";
import { Toggle } from "@/registry/default/ui/toggle";
import {
  Tooltip,
  TooltipPopup,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

export default function Particle() {
  const [bookmarked, setBookmarked] = useState(false);
  const toggleRef = useRef<HTMLDivElement>(null);
  const toastIdRef = useRef<string | null>(null);
  const toastTimeout = 2000;

  function handleToggleChange(pressed: boolean) {
    setBookmarked(pressed);

    if (toastIdRef.current) {
      anchoredToastManager.close(toastIdRef.current);
      toastIdRef.current = null;
    }

    if (pressed && toggleRef.current) {
      toastIdRef.current = anchoredToastManager.add({
        data: {
          tooltipStyle: true,
        },
        positionerProps: {
          anchor: toggleRef.current,
        },
        timeout: toastTimeout,
        title: "Bookmarked!",
        type: "success",
      });
    }
  }

  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <div ref={toggleRef}>
            <Toggle
              aria-label={bookmarked ? "Remove bookmark" : "Bookmark this"}
              onPressedChange={handleToggleChange}
              pressed={bookmarked}
            >
              <BookmarkIcon aria-hidden="true" />
            </Toggle>
          </div>
        }
      />
      <TooltipPopup>
        <p>{bookmarked ? "Remove bookmark" : "Bookmark this"}</p>
      </TooltipPopup>
    </Tooltip>
  );
}
```