/Click feedback
Click feedback • React
Contact Underline Button
A compact contact action whose icon turns orange while an underline draws beneath the label.
Installation
Requires lucide-react for its icons. The shadcn CLI installs it for you; copying the code by hand means installing it yourself.
Terminal
npx shadcn@latest add @microkit/contact-underline-buttonCode
1import { ArrowRight } from "lucide-react";23export function ContactUnderlineButton() {4return (5<button type="button" className="group inline-flex cursor-pointer appearance-none items-center justify-start gap-2 overflow-hidden border-0 bg-transparent p-0 pr-4 font-[inherit] text-[light-dark(#14181e,#f0f0f0)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]">6<span className="relative z-10 grid size-8 shrink-0 place-items-center rounded-lg bg-[light-dark(#14181e,#f0f0f0)] text-black transition-colors duration-[540ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:bg-[#f97316] group-focus-visible:bg-[#f97316]" aria-hidden="true">7<ArrowRight className="transition-transform duration-[540ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:scale-[1.35] group-focus-visible:scale-[1.35]" size={16} strokeWidth={2.5} />8</span>9<span className="flex flex-col justify-between gap-1 py-2">10<span className="relative z-10 text-base font-medium leading-none">Get in touch</span>11<span className="h-px w-full origin-left scale-x-0 bg-[light-dark(#14181e,#f0f0f0)] transition-transform duration-[540ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:scale-x-100 group-focus-visible:scale-x-100" />12</span>13</button>14);15}