ChromeButton is a metallic pill with a liquid-metal border. The face stays solid and readable, following your theme: dark with a white label in dark mode, white with a dark label in light mode. Meanwhile bands of polished chrome travel around the ring and slosh like liquid: broad silver, dark troughs, and thin hot highlights. Hover it and dark and bright ripples swirl out from your cursor while the flow speeds up; press it and a shock front runs around the ring from where you clicked.
Preview
Props
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/chrome-buttonUsage
import { ChromeButton } from "@/components/evil-buttons/chrome-button";
export function ButtonDemo() {
return <ChromeButton onClick={() => console.log("Continue")}>Continue</ChromeButton>;
}Icons can sit next to the label; SVGs inside are sized to fit each size.
Props
The component spreads native button props and forwards its ref.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Face content: label and icons. Falls back to label. |
label | React.ReactNode | "Continue" | Label used when no children are provided. |
tone | "auto" | "dark" | "light" | "auto" | auto follows the theme: white face normally, dark face inside a .dark ancestor (shadcn's convention). dark and light force one. |
size | "default" | "sm" | "icon" | "default" | Pill, compact pill, or a round icon-only button. Give icon buttons an aria-label. |
speed | number | 1 | Speed multiplier for the metal flowing around the ring. |
interactive | boolean | true | Swirl the metal around the pointer and speed it up on hover, and send a shock front through it on press. |
className | string | - | Extra classes merged onto the outer ring. |
Notes
- Self-contained: the liquid metal is a plain WebGL shader in the component file, with no
oglor external registry dependency. - The shader fills the whole button and the solid face covers the middle, so only the ring shows. Bands are laid out by angle from the center, so they circle the border rather than drifting across it. A lit top lip and shadowed underside on the ring, plus an inset shadow on the face, make the border read as a raised metal tube.
- The metal only animates while the button is on screen and the tab is visible. A static silver gradient shows until the first frame paints, and stays if WebGL is unavailable.
- Keyboard presses send the shock front from the center.
- With reduced motion, the metal keeps flowing at a fifth of its speed rather than stopping.
Registry
The registry item includes components/evil-buttons/chrome-button.tsx, and adds clsx and tailwind-merge as dependencies.