morphbadges

A dynamic, state-based badge that smoothly morphs between states in real time. One element — its label, color, width and icon all tween as your data changes (free → paid, member → admin, pending → success).

Animation is powered by Motion — the shape morph is a real layout (FLIP) animation, so the pill glides between sizes instead of snapping. The label/icon swaps and accent recolor ride along with it.

npm install morphbadges

react, react-dom and motion are the runtime dependencies (motion is installed automatically).

Usage

import { Morphbadges } from "morphbadges";
import "morphbadges/styles.css";

function Plan({ tier }: { tier: "free" | "pro" | "enterprise" }) {
  return (
    <Morphbadges
      state={tier}
      states={{
        free: { label: "Free", variant: "neutral" },
        pro: { label: "Pro", variant: "info" },
        enterprise: { label: "Enterprise", variant: "premium" },
      }}
    />
  );
}

Change the state prop and the badge morphs — old label exits up with blur, the new one enters from below, the pill recolors, and its width tweens to fit.

Static badge

<Morphbadges variant="success">Active</Morphbadges>

Props

| Prop | Type | Description | | ---------- | ------------------------------- | ------------------------------------------------------ | | states | Record<string, MorphState> | Map of state-key → descriptor. Enables morphing. | | state | string | Active key into states. Change it to morph. | | children | ReactNode | Static label when states is omitted. | | variant | neutral \| success \| info \| warning \| danger \| purple \| premium | Built-in semantic color. | | color | string | Custom accent (any CSS color). Overrides variant. | | icon | ReactNode | Leading icon; cross-fades on change. | | dot | boolean | Leading status dot (default: on when there's no icon). | | pulse | boolean | Pulse the dot — good for "live" states. | | solid | boolean | Fill the pill with the accent. | | size | sm \| md \| lg | Default md. | | duration | number | Total morph duration in ms (shape + color). Default 440. |

MorphState

interface MorphState {
  label: string;
  variant?: MorphVariant;
  color?: string;
  icon?: ReactNode;
  dot?: boolean;
  pulse?: boolean;
  solid?: boolean;
}

Accessibility

The badge is a role="status" live region and ships a prefers-reduced-motion guard — colors and labels still update, they just don't tween.

License

MIT