Buttons
Danger Action Button
Необратимое действие: по левому краю выезжает предупреждающая штриховка, подпись отодвигается. Самодостаточна: один файл, без зависимостей.
- button
- danger
- destructive
- warning
- hatch
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «button-006» (Danger Action Button) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Команда установки недоступна: URL реестра VibeUI не сконфигурирован.
Ставится в: components/vibeui/button-006.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Необратимое действие: по левому краю выезжает предупреждающая штриховка, подпись отодвигается. Самодостаточна: один файл, без зависимостей.
Кнопка необратимого действия. В покое — плотная красная заливка с тёмной рамкой; на наведении и фокусе слева выезжает полоса диагональной штриховки и физически отодвигает подпись, увеличивая внутренний отступ. Штриховка работает как сигнал независимо от цветовосприятия.
## 3. Как использовать
import { Button006 } from "@/components/vibeui/button-006"
<Button006 onClick={dropDatabase}>Удалить навсегда</Button006>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- штриховую полосу как второй сигнал помимо цвета — она нужна тем, кто не различает красный
- выезд штриховки и на hover, и на focus-visible: предупреждение должно появляться и при работе с клавиатуры
- рост padding-left вместе со штриховкой — подпись отъезжает, а не перекрывается
- тёмную рамку по краю заливки: она отделяет кнопку от красного фона, если он есть
- более жирное начертание и разрядку подписи, чем у остальных кнопок набора
## 6. Можно менять
- подпись кнопки
- обработчик onClick
- оттенок опасности — проп danger
- внешние отступы через className
## 7. Правила
- Не используй для обратимых действий: визуальный вес рассчитан на необратимое.
- Не убирай штриховку, оставив только красный цвет — тогда сигнал станет одноканальным.
- Для действий, требующих подтверждения, ставь её вместе с двухшаговой кнопкой, а не вместо неё.
- Не выноси CSS-переменные в globals.css: компонент должен оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
Команда установки недоступна: переменная окруженияREGISTRY_BASE_URL
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-006-*. Штриховка рисуется repeating-linear-gradient и выезжает и на hover, и на focus-visible, поэтому предупреждение видно и с клавиатуры.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Button006Props = ComponentPropsWithoutRef<"button"> & {
danger?: string
}
// Идея компонента: необратимость видно до клика. По левому краю идёт узкая
// полоса предупреждающей штриховки — она проявляется на наведении и фокусе
// и физически расширяется, отодвигая подпись. Цвет здесь не единственный
// сигнал: штриховка читается и без цветовосприятия.
const STYLES = `
:where([data-vibeui-block="button-006"]){
--vibeui-button-006-danger:oklch(0.55 0.21 26);
--vibeui-button-006-fg:oklch(0.99 0.005 26);
--vibeui-button-006-hatch:oklch(1 0 0 / 30%);
--vibeui-button-006-ring:color-mix(in oklab, var(--vibeui-button-006-danger) 75%, transparent);
--vibeui-button-006-radius:0.5rem;
--vibeui-button-006-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="button-006"]{
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 color-mix(in oklab, black 18%, var(--vibeui-button-006-danger));
border-radius:var(--vibeui-button-006-radius);
font-family:var(--vibeui-button-006-font);font-size:0.875rem;font-weight:600;line-height:1;
letter-spacing:0.01em;background:var(--vibeui-button-006-danger);color:var(--vibeui-button-006-fg);
transition:padding-left .22s cubic-bezier(0.16,1,0.3,1),background-color .18s ease;
}
[data-vibeui-block="button-006"]::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0.75rem;
background:repeating-linear-gradient(45deg,var(--vibeui-button-006-hatch) 0 3px,transparent 3px 6px);
transform:translateX(-100%);transition:transform .22s cubic-bezier(0.16,1,0.3,1);
}
[data-vibeui-block="button-006"]:hover:not(:disabled),[data-vibeui-block="button-006"]:focus-visible{
padding-left:1.75rem;background:color-mix(in oklab, var(--vibeui-button-006-danger) 88%, black);
}
[data-vibeui-block="button-006"]:hover:not(:disabled)::before,[data-vibeui-block="button-006"]:focus-visible::before{transform:translateX(0)}
[data-vibeui-block="button-006"]:focus-visible{outline:2px solid var(--vibeui-button-006-ring);outline-offset:2px}
[data-vibeui-block="button-006"]:disabled{cursor:not-allowed;opacity:.55}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-006"],[data-vibeui-block="button-006"]::before{transition:none!important}}
`
/**
* Необратимое действие: предупреждающая штриховка выезжает по левому краю
* на наведении и фокусе. Один файл, ноль зависимостей, собственная палитра.
*/
export function Button006({
danger,
type = "button",
className,
style,
children = "Удалить навсегда",
...props
}: Button006Props) {
const palette = {
...(danger ? { "--vibeui-button-006-danger": danger } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-button-006" precedence="medium">
{STYLES}
</style>
<button
{...props}
type={type}
data-vibeui-block="button-006"
className={className}
style={palette}
>
{children}
</button>
</>
)
}