Button
A pill button whose letters roll up from the middle on hover, with a lift, a springy press and a sound cue.
Behaviour
- A string label rolls up letter by letter, starting from the middle; the old letter fades out as the new one fades in.
- Lifts 2px on hover and presses down to 97%.
- Hover motion only runs on devices that can hover.
- Plays its sound cue on click when Cuelume is running.
- Reduced motion: no lift, no roll.
Props
| Prop | Type | Description |
|---|---|---|
| variant | "solid" | "ghost"default "solid" | Filled, or an outline. |
| size | "md" | "lg"default "md" | 46px tall, or 64px with wider padding. |
| href | string | Renders an <a> instead of a <button>. |
| icon | ReactNode | Sits before or after the label. |
| iconPosition | "start" | "end"default "start" | Which side the icon goes. |
| wide | boolean | Full width, with vertical margin. |
| cue | "tap" | "navigate" | "open" | "toggle"default "tap" | Cuelume sound played on click. |
| forceHover | boolean | Shows the hover state without a pointer. |
| className | string | Extra classes on the root. |
Installation
npx shadcn@latest add https://purrfectui.com/r/button.jsonHow to use
import { Rocket } from "lucide-react";
import { Button } from "@/components/ui/button";
<Button icon={<Rocket className="size-4" />}>Ship it</Button>
<Button variant="ghost" href="/docs">Read the docs</Button>Source code
Loading…
Credits
Ported from armour.vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.