VibeUI

Buttons

Danger Action Button

An irreversible action: warning hatching slides in from the left edge and pushes the label aside. Self-contained — one file, no dependencies.

  • button
  • danger
  • destructive
  • warning
  • hatch

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 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-006" (Danger Action 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-006.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
An irreversible action: warning hatching slides in from the left edge and pushes the label aside. Self-contained — one file, no dependencies.

A button for irreversible actions. At rest it is a solid red fill with a dark border; on hover and focus a band of diagonal hatching slides in from the left and physically pushes the label aside by growing the inner padding. The hatching works as a signal independently of colour vision.

## 3. How to use it
import { Button006 } from "@/components/vibeui/button-006"

<Button006 onClick={dropDatabase}>Delete permanently</Button006>

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 hatched band as a second signal beside colour — it is what reaches people who cannot tell red apart
- the hatching sliding in on both hover and focus-visible: the warning has to appear for keyboard users too
- the padding-left growing along with the hatching — the label moves aside instead of being covered
- the dark border around the fill: it separates the button from a red background if there is one
- the heavier weight and letter spacing of the label compared to the rest of the set

## 6. You may change
- the label
- the onClick handler
- the danger hue through the danger prop
- outer spacing through className

## 7. Rules
- Do not use it for reversible actions: its visual weight is calibrated for irreversible ones.
- Do not drop the hatching and keep only the red — the signal then runs on a single channel.
- For actions that need confirmation, pair it with the two-step confirm button rather than replacing one with the other.
- 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-006-*. Штриховка рисуется repeating-linear-gradient и выезжает и на hover, и на focus-visible, поэтому предупреждение видно и с клавиатуры.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

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>
    </>
  )
}