# Button Icon Reveal — Animated React Button

> On hover the label slides aside and an icon glides into the space it leaves, or an existing icon exits and re-enters like a conveyor. The button never changes width.

- Category: [Buttons](https://pixelpapa.com/components/buttons.md)
- Tags: button, hover, icon, reveal, css
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/buttons/button-icon-reveal

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/button-icon-reveal
```

The file is written to `components/pixelpapa/button-icon-reveal.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/buttons/button-icon-reveal.

## AI prompt

```text
Add the "Button Icon Reveal" component from PixelPapa UI to this project.

What it is: On hover the label slides aside and an icon glides into the space it leaves, or an existing icon exits and re-enters like a conveyor. The button never changes width.
Category: Buttons. Depends on: lucide-react.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/button-icon-reveal
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/button-icon-reveal.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/button-icon-reveal.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/button-icon-reveal" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More buttons

- [Button 3D Press](https://pixelpapa.com/components/buttons/button-3d-press.md): A raised key with a real edge and cast shadow: it lifts slightly on hover, sinks hard on press and bounces back on release.
- [Button Async States](https://pixelpapa.com/components/buttons/button-async-states.md) (Pro): Runs a promise and morphs through idle, a collapsed spinner, then a success or error label, animating its width between each.
- [Button Border Beam](https://pixelpapa.com/components/buttons/button-border-beam.md) (Pro): A comet of light laps the button's border on a loop, with a soft halo that follows the head of the beam.
- [Button Confetti Burst](https://pixelpapa.com/components/buttons/button-confetti-burst.md) (Pro): Throws a fan of DOM confetti from the exact point you clicked; pieces arc up, tumble and fall under gravity. No canvas.
- [Button Copy Feedback](https://pixelpapa.com/components/buttons/button-copy-feedback.md) (Pro): Copies a value to the clipboard, then swaps its icon for a drawn check and rolls the label to "Copied" before settling back.
- [Button Gradient Border Glow](https://pixelpapa.com/components/buttons/button-gradient-border-glow.md) (Pro): A flowing gradient outline with a blurred twin underneath; the glow brightens on hover and leans toward the cursor.