Buttons
Confirm Button
Two-step confirmation inside the button itself: the first click opens a confirm window with a draining time bar, the second one confirms. Self-contained — one file, no dependencies.
- button
- confirm
- destructive
- two-step
- stateful
Preview
1440pxHost theme
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.
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "button-005" (Confirm Button) from VibeUI
## 1. Install first — do not skip, do not recreate
Install command is unavailable: the VibeUI registry URL is not configured.
Installs to: components/vibeui/button-005.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
Two-step confirmation inside the button itself: the first click opens a confirm window with a draining time bar, the second one confirms. Self-contained — one file, no dependencies.
Two-step confirmation without a modal. The first click arms the button: the label turns into a question, the background goes to a warning tone, and a bar along the bottom edge drains the remaining time. A second click inside that window calls onConfirm; otherwise the button returns to rest on its own.
## 3. How to use it
import { Button005 } from "@/components/vibeui/button-005"
<Button005 onConfirm={deleteProject} confirmLabel="Delete for real?" timeout={3000}>
Delete project
</Button005>
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the two steps: the first click only arms, the action happens on the second — do not shorten it to one click
- the automatic return on timeout: an armed state must not hang around forever
- the draining bar along the bottom edge — it shows how much time is left
- the label change between the resting and the armed state
- the warning palette of the armed state, distinct from the resting one
- the prefers-reduced-motion rule: the bar stops animating, the state stays
## 6. You may change
- the children and confirmLabel labels
- the length of the window through the timeout prop
- the onConfirm handler
- the bar colour through the accent prop
- outer spacing through className
## 7. Rules
- Do not replace the built-in confirmation with window.confirm or a modal — the point of the component is that confirmation happens in place.
- Do not pass onClick: the component owns the click, and your action arrives through onConfirm.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
The install command is unavailable: the environment variableREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-005-*. Клиентский компонент: окно подтверждения — внутреннее состояние. Длительность окна задаётся пропом timeout, подтверждение приходит в onConfirm; обычный onClick компонент не принимает намеренно.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
"use client"
import { useEffect, useRef, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button005Props = Omit<
ComponentPropsWithoutRef<"button">,
"onClick"
> & {
confirmLabel?: string
/** Сколько окно подтверждения остаётся открытым, мс. */
timeout?: number
onConfirm?: () => void
accent?: string
}
// Идея компонента: подтверждение без модального окна. Первый клик открывает
// окно подтверждения прямо в кнопке — подпись меняется, а по нижнему краю
// убывает полоса оставшегося времени. Второй клик внутри окна подтверждает,
// иначе кнопка сама возвращается в исходное состояние.
const STYLES = `
:where([data-vibeui-block="button-005"]){
--vibeui-button-005-bg:oklch(0.96 0.004 265);
--vibeui-button-005-fg:oklch(0.28 0.014 265);
--vibeui-button-005-border:oklch(0.55 0.02 265 / 24%);
--vibeui-button-005-armed-bg:oklch(0.93 0.07 84);
--vibeui-button-005-armed-fg:oklch(0.36 0.09 70);
--vibeui-button-005-armed-bar:oklch(0.7 0.15 62);
--vibeui-button-005-ring:oklch(0.55 0.02 265 / 60%);
--vibeui-button-005-radius:0.625rem;
--vibeui-button-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-005"]{
position:relative;overflow:hidden;appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
height:2.5rem;padding:0 1.125rem;border:1px solid var(--vibeui-button-005-border);
border-radius:var(--vibeui-button-005-radius);
font-family:var(--vibeui-button-005-font);font-size:0.875rem;font-weight:500;line-height:1;
background:var(--vibeui-button-005-bg);color:var(--vibeui-button-005-fg);
transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
[data-vibeui-block="button-005"][data-armed="true"]{
background:var(--vibeui-button-005-armed-bg);color:var(--vibeui-button-005-armed-fg);
border-color:color-mix(in oklab, var(--vibeui-button-005-armed-bar) 45%, transparent);
}
[data-vibeui-block="button-005"] [data-part="bar"]{
position:absolute;left:0;bottom:0;height:2px;width:100%;
background:var(--vibeui-button-005-armed-bar);transform-origin:left center;
animation:vibeui-button-005-drain linear forwards;
}
@keyframes vibeui-button-005-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
[data-vibeui-block="button-005"]:hover:not(:disabled){border-color:color-mix(in oklab, var(--vibeui-button-005-fg) 35%, transparent)}
[data-vibeui-block="button-005"]:focus-visible{outline:2px solid var(--vibeui-button-005-ring);outline-offset:2px}
[data-vibeui-block="button-005"]:disabled{cursor:not-allowed;opacity:.55}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-005"] [data-part="bar"]{animation:none!important;transform:scaleX(1)}}
`
/**
* Подтверждение в два шага прямо в кнопке. Один файл, ноль зависимостей,
* собственная палитра. Клиентский компонент: окно подтверждения — состояние.
*/
export function Button005({
confirmLabel = "Точно удалить?",
timeout = 3000,
onConfirm,
accent,
type = "button",
disabled,
className,
style,
children = "Удалить проект",
...props
}: Button005Props) {
const [armed, setArmed] = useState(false)
const timerRef = useRef<number | undefined>(undefined)
useEffect(() => {
if (!armed) {
return
}
timerRef.current = window.setTimeout(() => setArmed(false), timeout)
return () => window.clearTimeout(timerRef.current)
}, [armed, timeout])
const palette = {
...(accent ? { "--vibeui-button-005-armed-bar": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-005" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-005"
data-armed={armed}
disabled={disabled}
className={className}
style={palette}
onClick={() => {
if (!armed) {
setArmed(true)
return
}
setArmed(false)
onConfirm?.()
}}
>
{armed ? confirmLabel : children}
{armed ? (
<span
data-part="bar"
aria-hidden="true"
style={{ animationDuration: `${timeout}ms` }}
/>
) : null}
</button>
</>
)
}