Button
Generate Button
One button for the whole AI generation cycle: it starts in idle, shows a running bar while working and stops the run.
What you can change
- the idle and running labels through the label and runningLabel props
- the line under the button through the hint prop: model, limit, what exactly is generated
- the initial state through the defaultRunning prop, a showcase needs a running button
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/button-062?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, palette in the local --vibeui-button-062-* variables. Client side: it keeps the running state and flips it on click, calling onGenerate or onStop. The generation bar is a pseudo-element with an infinite translate animation inside a button with overflow:hidden; under prefers-reduced-motion it stretches full width and stops moving. The label width is reserved by the longest variant through a hidden copy and minWidth, so switching states never nudges the neighbours. While running the button turns outlined, the spark hides and a stop square takes its place.
Tags
- button
- ai
- generate
- streaming
- stop
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…