Quick implementation
.btn--destructive {
--btn-destructive-bg: oklch(0.52 0.22 25);
--btn-destructive-hover: oklch(0.44 0.22 25);
--btn-destructive-text: oklch(1 0 0);
--btn-destructive-focus: oklch(0.68 0.20 25);
--btn-destructive-disabled: oklch(0.68 0.05 25);
--btn-destructive-disabled-text: oklch(0.50 0.05 25);
background-color: var(--btn-destructive-bg);
color: var(--btn-destructive-text);
border: none;
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
font-size: 1rem;
}
.btn--destructive:hover {
background-color: var(--btn-destructive-hover);
}
.btn--destructive:active {
transform: scale(0.98);
}
.btn--destructive:focus-visible {
outline: 2px solid var(--btn-destructive-focus);
outline-offset: 2px;
}
.btn--destructive:disabled {
background-color: var(--btn-destructive-disabled);
color: var(--btn-destructive-disabled-text);
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.btn--destructive {
transition: none;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a design system component library.
Goal: A destructive/danger button for delete, remove, or irreversible actions — visually distinct from primary actions using red oklch() tones.
Technical constraints:
- Use oklch() for all colors — no hex or rgba(). Red hue is ~15–25.
- Define colors as CSS custom properties on the element for easy theming.
- Include :hover (darken), :active (slight scale), :focus-visible (ring), and :disabled states.
- font-family should use var(--font-sans) or inherit — never hardcode a font.
- Use @media (prefers-reduced-motion: reduce) to disable transitions.
Framework variant (pick one):
A) Vanilla HTML + CSS — a .btn--destructive class applied to a <button>.
B) React component — accept label, onClick, disabled, and isLoading props. Apply aria-disabled when disabled.
Edge cases to handle:
- Disabled state: cursor: not-allowed, reduced opacity, pointer-events: none on the wrapper if needed.
- Icon variant: add a trash/warning icon before the label using a ::before pseudo-element or slot.
- Confirmation pattern: on first click show "Are you sure?" state before firing the action.
Return HTML + CSS (or TSX + CSS module for React).Why this matters in 2026
Destructive actions require clear visual signaling to prevent accidental data loss. Using oklch() allows for perceptually uniform color adjustments that maintain contrast ratios across light and dark modes without complex media queries. This ensures that critical actions like delete or remove are immediately recognizable.
The logic
The button utilizes CSS custom properties to define color states locally. This isolates the destructive theme from the global design system while allowing easy overrides. The oklch() function is used to define the red hue around 25, ensuring it stands out as a warning color. Hover states darken the background slightly to provide feedback, while the :focus-visible pseudo-class ensures keyboard users can track the element.
Accessibility & performance
Accessibility is handled through high contrast ratios between the text and background colors. The focus-visible ring is thick enough to be seen by users with low vision. Performance is optimized by using hardware-accelerated transitions for color and transform. The @media (prefers-reduced-motion: reduce) query disables animations for users who experience motion sickness, ensuring the component is inclusive.