primitives

Gradient Flow Button

A bold pill-shaped button with a continuously flowing multi-stop gradient built from primary and accent tokens, animating background-position in an infinite 4s loop for a living-color effect. Features a decorative crown SVG icon that shifts from accent to primary-foreground on hover. Fully accessible: native button semantics, focus-visible ring from --ring, aria-hidden decorative icon, and a reduced-motion media query that freezes the gradient in place.

Ported from satyamchaudharydev (MIT)

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/gradient-flow-button

Usage

Usagetsx

<GradientFlowButton />

Props

Standard props — see source.

Source

gradient-flow-button.tsxtsx

"use client";

import type React from "react";
import styles from "./gradient-flow-button.module.css";

export type GradientFlowButtonProps = React.ComponentProps<"button">;

export function GradientFlowButton({
  children,
  className,
  ...props
}: GradientFlowButtonProps) {
  const cls = [
    styles.button,
    // ponytail: focus ring via Tailwind so it picks up --ring without duplication
    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
    "disabled:cursor-not-allowed disabled:opacity-40",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button type="button" {...props} className={cls}>
      {/* decorative crown/star — aria-hidden so screen readers skip it */}
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 36 24"
        className={styles.icon}
      >
        <path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z" />
      </svg>
      {children ?? "Unlock Pro"}
    </button>
  );
}

Dependencies

@bottega/tokens