Metal Button

A compact button (or link) with a looping metallic outline. Default is a chrome steel highlight. Pass accent to keep the whole border brand-colored metal while a specular highlight still travels around the edge. Theme-aware via CSS variables, no extra dependencies.

Preview

Installation

Install the component using the CLI.

terminal

npx shadcn@latest add https://www.nkcbuilds.com/r/metal-button.json

Usage

Import the component:

import

import { MetalButton } from "@/components/ui/metal-button"

Use it in your code:

example.tsx

<MetalButton>Chrome</MetalButton>
<MetalButton accent="#61DAFB">React</MetalButton>
<MetalButton href="https://github.com">Open</MetalButton>

Props

Property	Type	Default	Description
`children`	`ReactNode`	`—`	Label, icon, or both.
`accent`	`string`	`—`	Brand color for a full colored metal rim (e.g. #61DAFB). Omit for default chrome.
`href`	`string`	`—`	When set, renders an <a>. Omit for a <button>.
`className`	`string`	`—`	Extra classes on the control.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type. Ignored when href is set.
`disabled`	`boolean`	`—`	Disables the button. Ignored when href is set.