FeedbackGenerated from the public API
IconMorph
Swap one icon for another with a morph, keeping one accessible name.
@luc/ui/motionLive preview
One glyph dissolves into the next in a fixed-size box, so a toolbar never reflows when state changes.
idle<IconMorph
state={state}
size={22}
icons={{ idle: <PlayIcon />, running: <PauseIcon />, done: <CheckIcon /> }}
/>Usage
import { IconMorph } from "@luc/ui/motion";<IconMorph
state={state}
size={22}
icons={{ idle: <PlayIcon />, running: <PauseIcon />, done: <CheckIcon /> }}
/>API
| Export | Kind | Signature |
|---|---|---|
IconMorph | 3 documented props | ({ className, state, icons, size, style, ...props }: IconMorphProps) => import("@types/react").JSX.Element |
IconMorph props
Type: IconMorphProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
icons | Record<string, ReactNode> | — | The glyph set, keyed by state. Two or three states is the sweet spot. |
size? | string | number | undefined | — | Size of the glyph box. Keeps the layout from jumping between states. |
state | string | — | Identity of the active icon. Changing it swaps the glyph. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related