Icon Morph Button
A free animated button icon for React that swaps with its label on interaction.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
Icon Morph Button is a free animated button icon React component for Next.js, React and Tailwind. Its label swaps with a fixed ArrowRight icon on hover or keyboard focus while the pill keeps exactly the same dimensions.
The spring enhancement is armed only after hydration on fine pointers when reduced motion is not requested; server rendering, failed JavaScript, touch devices and reduced-motion settings keep the complete label and arrow visible side by side, with the same real anchor, accessible name and focus ring.
Interaction preview
Hover the pill or reach it with the keyboard to swap its label for the arrow without moving the button.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/btn-icon-morphUsage
import { IconMorphButton } from "@/components/ui/btn-icon-morph";
export default function Page() {
return (
<IconMorphButton
label="Explore components"
href="/components"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Button text rendered as the anchor's accessible label. |
| href | string | required | Destination passed to the real anchor element. |
| className | string | undefined | Additional classes merged onto the anchor. |
Customisation
Icon Morph Button has no component-specific CSS variables. It uses the inverted semantic foreground and background pair for AA contrast and the ring token for keyboard focus. Use className for spacing or typography while keeping that contrast pair intact.
<IconMorphButton
label="View the collection"
href="/components"
className="px-8 text-base"
/>Frequently asked questions
- Is Icon Morph Button free for commercial use?
- Yes. Icon Morph Button is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the icon morph accessible and performant?
- Yes. It is a real anchor named by one visible text label, the decorative arrow is hidden from assistive technology, and keyboard focus gets the same morph plus a distinct focus ring. Only transform and opacity animate, the reserved slot prevents layout shift, and touch or reduced-motion paths stay completely static.
- How do I customise the icon morph button?
- Pass className to adjust spacing or typography. The component intentionally keeps ArrowRight fixed and uses the semantic foreground, background and ring tokens, so it follows your existing theme without adding component-specific variables.