microkit
componentcontact-reveal-buttonsource: ok · refreshed
Contact Reveal Button
A circular arrow and label that resolve into a polished contact pill on hover.
npx shadcn add "https://microkit.co/r/contact-reveal-button.json"free
Where it goes
contact
Interaction
scroll-reveal
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lighticonslucide-react
Files1 · source cached 10/8/2026, 3:32:37 AM
registry/microkit/contact-reveal-button.tsx
import { ArrowRight } from "lucide-react";
export function ContactRevealButton() {
return (
<button className="group relative inline-flex h-9 w-[145px] items-center gap-[10px] overflow-hidden rounded-full border-0 bg-transparent py-0 pr-[15px] text-[13px] font-medium leading-none text-[light-dark(#14181e,#f0f0f0)] transition-colors duration-[280ms] hover:text-[light-dark(#f6f7f9,#111)] focus-visible:text-[light-dark(#f6f7f9,#111)]">
<span className="absolute inset-y-0 left-0 w-9 rounded-full bg-[light-dark(#14181e,#f0f0f0)] transition-[width] duration-[320ms] ease-[cubic-bezier(.4,0,.2,1)] group-hover:w-full group-focus-visible:w-full" />
<span className="relative z-10 grid size-9 shrink-0 place-items-center rounded-full text-[light-dark(#f6f7f9,#111)] transition-colors delay-[120ms] duration-200 group-hover:bg-[#f97316] group-focus-visible:bg-[#f97316]">
<ArrowRight size={18} strokeWidth={2.5} />
</span>
<span className="relative z-10">Get in touch</span>
</button>
);
}