Installation

Usage

import { StaggerButton } from '@/components/sora-ui/buttons/stagger-button';

export default function Page() {
  return (
    <>
      <StaggerButton href="#">Staggering Button</StaggerButton>

      <StaggerButton variant="link" href="#" className="text-white">
        or use on links
      </StaggerButton>

      <StaggerButton stagger="text" href="#">
        Slide the whole label
      </StaggerButton>

      <StaggerButton asChild>
        <button type="button">Submit</button>
      </StaggerButton>
    </>
  );
}

Props

When to Use

Use StaggerButton for one or two high-emphasis CTAs — a hero primary action, a pricing "Get started" button, or a key navigation link where the animation rewards attention. The per-character stagger signals premium quality and invites hovering.

Avoid it for buttons used repeatedly in lists, destructive actions (the playful animation clashes with the gravity of deleting), or small utility actions like "Close" or "Cancel".

Accessibility

The button renders as an <a> by default, or wraps any element via asChild. All animation is CSS opacity and transform — the visible text is always present in the DOM and readable by screen readers. The default staggerDelay of 10 ms per character means total animation time stays under 200 ms for most labels, within the threshold that avoids vestibular concerns. Unlike the Motion-driven primitives in this registry, this component has no JS animation to gate — the hover transition and character stagger are disabled via the Tailwind motion-reduce:transition-none/motion-reduce:group-hover:* utilities, which apply automatically under prefers-reduced-motion: reduce.