Generate Button — VisualSandbox UI

Circular submit button with a blurred glow halo and a sparkle icon. Scales out when disabled; the glow brightens and pulses while loading.

In the preview: click a button to run a fake generation, and use the toggle to watch the disabled scale-out.

Install

npx shadcn@latest add @visualsandbox-ui/generate-button

Requires the one-time registry entry from Installation — or use the full URL with zero setup:

npx shadcn@latest add https://ui.visualsandbox.com/r/generate-button.json

Usage

Drops straight into the Composer's ComposerSubmit slot, or anywhere a "make it go" button belongs.

import { GenerateButton } from "@/components/visualsandbox-ui/generate-button";

<GenerateButton
  onClick={generate}
  loading={generating}
  disabled={!valid}
  glowClassName="bg-[conic-gradient(from_180deg,#FF2E55,#FF6B1A,#FFC107,#2BDE6A,#1FA8FF,#7C3DFF,#FF3DC9,#FF2E55)]"
/>;

Why it disappears when disabled

Greyed-out submit buttons invite dead clicks. This one unmounts with a spring scale-out instead — the form reads as "not ready yet", and the reappearance pop when inputs become valid is its own affordance.

Props

Prop	Type	Default	Notes
`onClick`	`() => void`	—
`loading`	`boolean`	`false`	Brightens the glow and applies `loadingGlowClassName`.
`disabled`	`boolean`	`false`	Hides the button (spring scale-out).
`title`	`string`	`"Generate (⏎)"`	Tooltip.
`ariaLabel`	`string`	`"Generate"`
`glowClassName`	`string`	`"bg-primary"`	Background of the halo. Gradients welcome.
`loadingGlowClassName`	`string`	`"opacity-60 animate-pulse"`	Extra glow classes while loading.
`bgClassName`	`string`	—	Classes on the circular disc (CSS hook).
`className`	`string`	—	Classes on the button (CSS hook for consumer animations).
`children`	`ReactNode`	`<SparkleIcon />`	Icon override.

SparkleIcon is exported too — starClassNames gives each of its three stars a className so consumer CSS can animate them individually (twinkle on hover, dance while loading).