Animated Buttons

These components retain the standard Siteplane interaction contract and replace generic scale feedback with one focused custom animation.

Installation

pnpm dlx shadcn@4.16.1 add @siteplane/animated-buttons

Fill Sweep

Use FillSweepButton for a compact call to action where the hover transition can carry a little more emphasis without changing the control's geometry.

import { FillSweepButton } from "@/components/ui/animated-buttons";

export function Example() {
  return <FillSweepButton variant="secondary">Secondary</FillSweepButton>;
}

Expanding Arrow

Use ExpandingArrowButton for a directional action such as learning more or continuing to the next view. The control keeps a stable outer width while its leading surface grows.

import { ExpandingArrowButton } from "@/components/ui/animated-buttons";

export function Example() {
  return <ExpandingArrowButton label="Learn More" />;
}

Expanding Logout

Use ExpandingLogoutButton when an icon-only action benefits from revealing its label on pointer hover. The component reserves the full label width and expands around its fixed center, so nearby content does not jump.

import { ExpandingLogoutButton } from "@/components/ui/animated-buttons";

export function Example() {
  return <ExpandingLogoutButton label="Logout" variant="destructive" />;
}

Sizing

ExpandingArrowButton and ExpandingLogoutButton inherit sm, default, lg, or xl from SiteplaneUIProvider. Pass size directly when one control needs a local override. FillSweepButton uses the same standard Button sizing contract.

Accessibility

The visible controls remain real buttons with focus styles and accessible names. Hover is additional feedback only; the action does not depend on the animation, and prefers-reduced-motion removes the transitions.