design-infraReport a problem or share feedback← Catalog
Icon Swap Button
curatedfreemicrokit/icon-swap-button
A leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
$
npx shadcn@latest add https://microkit.co/r/icon-swap-button.jsonnpm deps: lucide-react
Our notes
On hover/focus-visible the leading icon (an Apple mark in the demo) collapses out while an arrow opens in on the other side, so the button never changes width (520ms ease-out transitions on width/margin/opacity). Great for download/CTA buttons. No reduced-motion guard; light-dark() hex colours.- Source
- MicroKit
- Kind
- component
- Categories
- button
- Use as
- recipe — technique you apply to your own markup
- Applies to
- buttoncta
- Motion
- on hover · subtle · css · low cost · ignores reduced motion
- Tags
- css, hover, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Magnetic Fill Buttonmicrokit/magnetic-fill-buttonZero-dependency magnetic button: pointermove writes CSS vars (14%/22% of the cursor offset) that translate the pill, and a fill rises bottom-to-top on hover/focus (380ms). Much lighter than Motion-based magnets. No reduced-motion guard on the translate; the outline, text and #f97316 fill are hard-coded — use border-foreground and a bg-primary fill with text-primary-foreground.
- Staggered Letter Text Swapmicrokit/staggered-letter-text-swapEach letter rolls up and is replaced by its twin with a 34ms stagger on hover/focus-visible — pure CSS transitions via a --letter-delay var; the button carries aria-label and the letter spans are aria-hidden; motion-reduce handled. Remove the hard-coded font-[Arial] and light-dark() text colour so it inherits your type and tokens. Nav links and text CTAs.
- Noise Backgroundaceternity/noise-backgroundAnimated gradient + noise texture. Works for editorial/brutalist when toned down.