Buttons
Confirm Button
Подтверждение в два шага прямо в кнопке: первый клик открывает окно подтверждения с убывающей полосой времени, второй подтверждает. Самодостаточна: один файл, без зависимостей.
- button
- confirm
- destructive
- two-step
- stateful
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-005» (Confirm Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.
Ставится в: components/vibeui/button-005.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Подтверждение в два шага прямо в кнопке: первый клик открывает окно подтверждения с убывающей полосой времени, второй подтверждает. Самодостаточна: один файл, без зависимостей.
Двухшаговое подтверждение без модального окна. Первый клик переводит кнопку во взведённое состояние: подпись меняется на вопрос, фон становится предупреждающим, по нижнему краю убывает полоса оставшегося времени. Второй клик внутри окна вызывает onConfirm, иначе кнопка сама возвращается в исходное состояние.
## 3. Как использовать
import { Button005 } from "@/components/vibeui/button-005"
<Button005 onConfirm={deleteProject} confirmLabel="Точно удалить?" timeout={3000}>
Удалить проект
</Button005>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- два шага: первый клик только взводит, действие выполняется вторым — не сокращать до одного клика
- автоматический возврат по таймауту: взведённое состояние не должно висеть вечно
- убывающую полосу по нижнему краю — она показывает, сколько осталось времени
- смену подписи между обычным и взведённым состоянием
- предупреждающую палитру взведённого состояния, отличную от палитры покоя
- правило prefers-reduced-motion: полоса перестаёт анимироваться, но состояние остаётся
## 6. Можно менять
- подписи children и confirmLabel
- длительность окна — проп timeout
- обработчик onConfirm
- цвет полосы — проп accent
- внешние отступы через className
## 7. Правила
- Не заменяй встроенное подтверждение на window.confirm или модальное окно — смысл компонента в том, что подтверждение происходит на месте.
- Не передавай onClick: компонент управляет кликом сам, действие приходит через onConfirm.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-005-*. Клиентский компонент: окно подтверждения — внутреннее состояние. Длительность окна задаётся пропом timeout, подтверждение приходит в onConfirm; обычный onClick компонент не принимает намеренно.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"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>
</>
)
}