Installation

Usage

import { SlidingChipButton } from '@/components/sora-ui/buttons/sliding-chip-button';

export default function Page() {
  return (
    <>
      <SlidingChipButton href="/docs" label="Explore components" />

      <SlidingChipButton variant="inverted" href="/docs" label="View docs" />

      <SlidingChipButton
        asChild
        variant="outline"
        duration={0.5}
        labelOffset={-32}
        labelOffsetLg={-40}
      >
        <a href="/pricing">Custom anchor</a>
      </SlidingChipButton>
    </>
  );
}

Props

When to Use

Use SlidingChipButton as a single primary call to action in hero sections, feature highlights, or pricing pages. The animated chips signal interactivity and direct the eye to the most important next step.

Pair it with a clear, short label (2–5 words). Avoid using more than one SlidingChipButton per visible viewport section — multiple animated CTAs compete for attention and dilute the effect.

Accessibility

SlidingChipButton renders as an <a> by default and forwards href directly. Use asChild to wrap a <button> for in-page actions that do not navigate. The sliding label and rotating chips are purely decorative; the link text is always in the DOM and read by screen readers. Focus state uses the standard visible outline. When prefers-reduced-motion: reduce is set, useReducedMotion() collapses the hover transition to duration: 0 — the end state still applies instantly, just without the animated motion.

Credits

Inspired by Annnimate.