Action Hint

Component 16

About

A particle emitter that shows an ephemeral action-feedback hint above an element and fades it out, for confirming actions like copy, save, or share.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Action Hint to your project and fits it to your theme.

Code

How Action Hint is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ActionHintEmitter, useActionHint } from "@/components/ui/action-hint";
import { Button } from "@/components/ui/button";
import { Copy, Check, Download, Share2, Bookmark } from "lucide-react";

function CopyButton() {
  const { emit } = useActionHint();
  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() =>
        emit(
          <span className="flex items-center gap-1.5">
            <Check className="size-3" />
            Copied!
          </span>,
        )
      }
    >
      <Copy className="size-4" />
      Copy
    </Button>
  );
}

function DownloadButton() {
  const { emit } = useActionHint();
  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() =>
        emit(
          <span className="flex items-center gap-1.5">
            <Download className="size-3" />
            Downloading ...
          </span>,
        )
      }
    >
      <Download className="size-4" />
      Download
    </Button>
  );
}

function ShareButton() {
  const { emit } = useActionHint();
  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() =>
        emit(
          <span className="flex items-center gap-1.5">
            <Share2 className="size-3" />
            Link shared!
          </span>,
        )
      }
    >
      <Share2 className="size-4" />
      Share
    </Button>
  );
}

function SaveButton() {
  const { emit } = useActionHint();
  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() =>
        emit(
          <span className="flex items-center gap-1.5">
            <Bookmark className="size-3" />
            Saved!
          </span>,
        )
      }
    >
      <Bookmark className="size-4" />
      Save
    </Button>
  );
}

export default function ActionHintDemo() {
  return (
    <div className="flex min-h-40 w-full items-center justify-center p-8">
      <div className="flex flex-wrap items-center gap-2">
        <ActionHintEmitter>
          <CopyButton />
        </ActionHintEmitter>

        <ActionHintEmitter>
          <DownloadButton />
        </ActionHintEmitter>

        <ActionHintEmitter>
          <ShareButton />
        </ActionHintEmitter>

        <ActionHintEmitter>
          <SaveButton />
        </ActionHintEmitter>
      </div>
    </div>
  );
}