primitives

AI Generate Button

A glossy gradient pill button for AI generation actions. Renders a vertical primary-token gradient (light top → full primary base) with a ::before inner-gloss inset, a continuously sweeping sheen highlight, a decorative sparkle glyph (✦, aria-hidden), and a soft primary-colored outer glow ring. Hover lifts with translateY + scale and an expanded glow; active presses to 98% scale. Fully accessible: native button semantics, focus-visible ring via --ring, decorative spans aria-hidden, sweep animation disabled under prefers-reduced-motion.

Ported from prikshit_1236 (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/ai-generate-button

Usage

Usagetsx

<AiGenerateButton />

Props

Standard props — see source.

Source

ai-generate-button.tsxtsx

"use client";

import type React from "react";
import styles from "./ai-generate-button.module.css";

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

/**
 * A glossy pill button styled for AI generation actions.
 * Renders a sweeping sheen highlight (idle loop), inner top gloss, sparkle glyph,
 * and an outer primary-colored glow ring — all token-driven.
 */
export function AiGenerateButton({
  children,
  className,
  ...props
}: AiGenerateButtonProps) {
  return (
    <button
      type="button"
      className={[styles.button, className].filter(Boolean).join(" ")}
      {...props}
    >
      {/* ponytail: decorative sheen span avoids pseudo-element stacking with ::before gloss */}
      <span aria-hidden="true" className={styles.sheen} />
      <span className={styles.content}>
        <span>{children ?? "Generate AI"}</span>
        {/* sparkle is decorative — aria-hidden */}
        <span aria-hidden="true" className={styles.sparkle}>
          ✦
        </span>
      </span>
    </button>
  );
}

Dependencies

@bottega/tokens