Action swap

Free

A button that cycles through a few labelled states, swapping label and icon in place.

Installs components/ui/action-swap.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/action-swap.json

When to use #

Use it for

Copy to Copied, or Follow to Following, where the next state is the result.
A control that steps through a short list of modes.

Skip it when

The states are unrelated actions; use separate buttons.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/action-swap.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Check, Plus } from "lucide-react"
import { ActionSwap } from "@/components/ui/action-swap"

export function FollowSwap() {
  return (
    <ActionSwap
      variant="secondary"
      items={[
        { id: "follow", label: "Follow", icon: <Plus aria-hidden="true" /> },
        { id: "following", label: "Following", icon: <Check aria-hidden="true" /> },
      ]}
    />
  );
}

API reference #

ActionSwap

component

PropTypeDefault

items *readonly ActionSwapItem[]—

valuestring—

defaultValuestring—

onValueChange((value: string, item: ActionSwapItem) => void)—

variant"default" | "secondary" | "ghost" | "destructive""default"

iconOnlybooleanfalse

cyclebooleantrue

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.