Icon Morph

Spring morph between icons when control state changes, such as copy to copied.

Copy

Change iconKey when the state changes; the old icon scales and blurs out as the new one comes in. Revert after a short delay.

import { useEffect, useState } from "react";
import { CheckIcon, CopyIcon, IconButton, IconMorph } from "@smallest-inc/ui";

export default function IconMorphCopy() {
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (!copied) return;
    const id = window.setTimeout(() => setCopied(false), 2000);
    return () => window.clearTimeout(id);
  }, [copied]);

  return (
    <IconButton
      variant="transparent"
      size="sm"
      aria-label={copied ? "Copied agent ID" : "Copy agent ID"}
      onClick={() => {
        void navigator.clipboard?.writeText("agent_7f3c9a");
        setCopied(true);
      }}
    >
      <IconMorph iconKey={copied ? "check" : "copy"}>
        {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
      </IconMorph>
    </IconButton>
  );
}

Toggle

For controls that flip between two states, such as mute and play. iconKey accepts a boolean, string or number.

import { useState } from "react";
import { Icon, IconButton, IconMorph } from "@smallest-inc/ui";

export default function IconMorphToggle() {
  const [muted, setMuted] = useState(false);
  const [playing, setPlaying] = useState(false);

  return (
    <div className="flex items-center gap-3">
      <IconButton
        variant="secondary"
        size="md"
        aria-label="Mute microphone"
        aria-pressed={muted}
        onClick={() => setMuted((current) => !current)}
      >
        <IconMorph iconKey={muted}>
          <Icon name={muted ? "IconMicrophoneOff" : "IconMicrophone"} className="size-4" />
        </IconMorph>
      </IconButton>
      <IconButton
        variant="secondary"
        size="md"
        aria-label={playing ? "Pause recording" : "Play recording"}
        onClick={() => setPlaying((current) => !current)}
      >
        <IconMorph iconKey={playing ? "pause" : "play"}>
          <Icon name={playing ? "IconPause" : "IconPlay"} className="size-4" />
        </IconMorph>
      </IconButton>
    </div>
  );
}

Best practices

When to use

Use when an icon button's glyph should acknowledge a state change: copy to copied, mute to unmuted, play to pause.
Use a plain icon swap for changes people do not trigger themselves, and Toast when the result needs words.

Behavior

Change iconKey on every state change; it accepts a boolean, string or number. The morph uses a zero-bounce spring (scale, opacity, blur) and swaps instantly under reduced motion.
Revert temporary states such as copied after about two seconds, and clear the timer on unmount.
Keep the morph inside a fixed-size icon-only Button so the layout does not shift.

Accessibility

Update the trigger's aria-label when the action completes ("Copied agent ID"). For toggles, keep the label stable and set aria-pressed.

PreviousAutoheight NextFilters