Generate Button

Installation

pnpm dlx @glinui/cli@latest add generate-button

Credits. Adapted from Vengeance UI (MIT, (c) 2025-2026 Ashutoshx7). Scoped Tailwind instead of an injected style tag, token colors, explicit generating and loading states, live status text, glass and sizes. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: no injected style tag or font stack, scoped utilities on tokens, explicit generating and loading props instead of focus-driven state, aria-busy with a polite announcement, real disabled state, variant vocabulary (glinr default, glass opt-in), sizes and asChild.

<div className="flex flex-wrap items-center gap-3">
<GenerateButton variant="glinr" label="glinr" />
<GenerateButton variant="solid" label="solid" />

<div className="flex flex-wrap items-center gap-3">
<GenerateButton variant="glinr" label="glinr" />
<GenerateButton variant="solid" label="solid" />
<GenerateButton variant="plain" label="plain" />
<GenerateButton variant="soft" label="soft" />
<GenerateButton variant="outline" label="outline" />
<GenerateButton variant="ghost" label="ghost" />
<GenerateButton variant="gradient" label="gradient" />
</div>

<GenerateButton variant="glass" defaultGenerating label="Draft reply" generatingLabel="Drafting" />

<GenerateButton variant="glass" defaultGenerating label="Draft reply" generatingLabel="Drafting" />

<GenerateButton hue={150} leadingIcon={<Rocket weight="fill" />} label="Deploy" />
<GenerateButton loading />

<GenerateButton hue={150} leadingIcon={<Rocket weight="fill" />} label="Deploy" />
<GenerateButton loading />

Accessibility

• Native button with the Button focus ring. Generating is never triggered by focus alone.
• Only the visible label is in the accessibility tree, so the name is never doubled.
• A polite status region announces the generating label.

Reduced Motion

Full motion sweeps a highlight across the label and pulses the sparkle. Subtle and none keep a static glow and the label swap only.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { GenerateButton } from "@glinui/ui"