Loading
Submit Lock Button
A button with a spinner that blocks repeat clicks: the label stays put, the button disables itself while busy, and a hidden region announces the status.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the button text through label
- the screen-reader text while waiting through pendingLabel
- the demo wait duration through pendingDuration in milliseconds
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.club/c/spinner-009?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…
How to use
<Spinner009 label="Save settings" pendingDuration={1600} />A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Button label
label· default: Save settings- Waiting text
pendingLabel· default: Saving, please wait- Duration, ms
pendingDuration· default: 1600- Accent
accent· default: theme colour
More in Loading
FAQ
- How do I add Submit Lock Button with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Submit Lock Button depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Submit Lock Button?
- Adapt: the button text through label; the screen-reader text while waiting through pendingLabel; the demo wait duration through pendingDuration in milliseconds. Keep as installed: the local --vibeui-spinner-009-* palette — do not swap it for your theme tokens; disabled and aria-busy on the button while busy — without them a repeat click is not blocked; the unchanged visible label: swapping text on every click jitters the button layout.
- Is Submit Lock Button free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/spinner-009.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
A client component: the pending state is kept in useState, and the timer that lifts the block is cleared in useEffect on unmount. On click the button gets disabled, aria-disabled and aria-busy, three bouncing dots appear next to the visible label — a repeat click during the work is ignored. The visible button text does not change, so that the layout is not jolted; the status is announced by a separate visually hidden region with role="status" and aria-live="polite". Under prefers-reduced-motion the dots freeze at different opacities. The button has no fill by design: the outline sits straight on the page background, which is why it never gained a background prop. The theme comes from the surrounding color-scheme through light-dark() — on a dark background the accent is lighter.
Tags
- spinner
- button
- loading
- double-submit
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…