Holo Button
The signature CTA: an animated iridescent border on a plain button. No motion states, no pointer tracking, nothing to wire up.
ActionsServer safeclass-variance-authority@radix-ui/react-slot
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/holo-buttonPulls in @duck/theme. Already installed items are skipped.
Usage
import { HoloButton } from "@/components/ui/holo-button"The file lands in components/ui/holo-button.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "holo" | "primary" | "outline" | "ghost" | "holo" | holo is the iridescent border. primary is solid duck lime. |
| size | "sm" | "default" | "lg" | "icon" | "default" | Control height and padding. |
| asChild | boolean | false | Render the child element instead of a button, for links. |
Rules
What keeps this component from turning into noise.
- Reach for holo-button when you want the look and nothing else. Reach for quack-button when the button has work to report.