RevealButton displays a masked value by default and reveals the real secret when activated. In hold mode the secret is visible only while the pointer is held down or Space/Enter is pressed. In toggle mode a click or keypress locks the revealed state until clicked again. The transition uses a blur-fade animation so the text appears to unblur from the mask.

Preview

RevealButton

Hold to reveal

Variants

Toggle mode

Click once to reveal, click again to hide.

Toggle

Click to toggle

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/reveal-button

Usage

[]txt

import { RevealButton } from "@/components/evil-buttons/reveal-button";

export function ButtonDemo() {
  return (
    <RevealButton
      secret="sk_live_abc123_xQ4z9"
      maskedValue="sk_live_•••••••"
      revealMode="hold"
      onRevealChange={(revealed) => console.log(revealed)}
    />
  );
}

Props

The component spreads any <button> HTML attributes except children.

Prop	Type	Default	Description
`secret`	`React.ReactNode`	`"sk_live_••••_9xQ4"`	The real value shown when revealed.
`maskedValue`	`string`	`"•••• •••• ••••"`	The placeholder string shown when hidden.
`label`	`React.ReactNode`	`"Reveal"`	Small label shown above the value when revealed.
`hiddenLabel`	`React.ReactNode`	`"Hidden"`	Small label shown above the value when hidden.
`revealMode`	`"hold" \| "toggle"`	`"hold"`	How the button reveals the secret. `"hold"` requires sustained press; `"toggle"` switches on each click.
`onRevealChange`	`(revealed: boolean) => void`	-	Callback fired whenever the revealed state changes.
`className`	`string`	-	Extra classes passed to the button.

Notes

In hold mode, releasing the pointer or blurring the button immediately hides the secret again.
Keyboard accessible in both modes: in hold mode, pressing and holding Space or Enter reveals; in toggle mode, Space or Enter fires a click as normal.
aria-pressed reflects the current revealed state for assistive technology.
The text value is truncated at max-w-44 to prevent layout overflow on long secrets. Wrap in a wider container or override via className if needed.
secret accepts React.ReactNode, so you can render formatted content rather than plain text.

Registry

The registry item includes components/evil-buttons/reveal-button.tsx and installs clsx, tailwind-merge, and motion as dependencies.