Metal Button

Renders an animated metal button with a liquid ring effect. It uses a shader to create a dynamic metallic look and supports text and icon variants. Use it for interactive elements that need a modern, glowing appearance.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/metal-button

npx layro-cli add @nolly-studio/metal-button

npx layro-cli add @nolly-studio/metal-button

bunx layro-cli add @nolly-studio/metal-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

/**
 * `metal-fx` around `Button` — liquid metal ring for controls.
 * `className` styles the button; `metalFxClassName` styles the MetalFx wrapper.
 *
 * With `normalizeHostStyles` (default), variant fills live on the MetalFx wrapper
 * and the button stays transparent so the shader ring stays visible. Pass
 * `normalizeHostStyles={false}` to keep all shadcn chrome on the button (filled
 * variants will cover most of the metal).
 */
import type { ComponentProps, CSSProperties } from "react"
import { forwardRef } from "react"
import { cva, type VariantProps } from "class-variance-authority"