A link styled as a pill inside a chrome rim.
FreeWeb and Mobile2 variantsMotion
Preview
npx shadcn add @fetaui/metallic-linkPlayground
Labels
Kind
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/metallic-link
Kinds
Default sits on the surface color, inverted on the inverse surface. Both fill with silver on hover.
Accessibility
- A native link.
Motion
- The chrome rim turns on its own, one lap every 6 s, and pauses offscreen.
- Hover fills the face with drifting silver over 240 ms and turns the arrow to point right. Press deepens the face.
- Disabled, motion off and reduced motion keep it still.
Responsive behavior
- 40 px high on every platform.
Performance
- The rim angle and sheen are CSS transitions, so no JavaScript runs on hover.
- The sheen moves with a transform on a pseudo element.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/metallic-link.
- It renders an anchor, so pass href. Other anchor props pass through.
- kind is default or inverted, and the arrow icon is built in.
- It has no disabled state. For actions, use Button.
Related
ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Expanding Arrow ButtonComponentA wide call to action where a chip opens across the button as its chevrons run.Slide Text ButtonComponentThe label slides up one row on hover or focus while a second label rises in.Metal FrameComponentRings any box in liquid chrome: bands drift round the edge, the edge swells toward the pointer, and thinking runs them faster.