Acción destructiva.

<div class="ui-sample ui-actions"><button class="btn btn--destructive" data-variant="destructive" type="button">Eliminar registro</button></div>

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950"><button class="btn btn--destructive border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" data-variant="destructive" type="button">Eliminar registro</button></div>

import type { ButtonHTMLAttributes, ReactNode } from "react";

export interface ButtonDestructiveProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Texto de la acción: verbo y objeto que se pierde («Eliminar registro»). */
  children?: ReactNode;
  /** Bloquea la acción y anuncia que sigue en curso. */
  busy?: boolean;
  busyLabel?: ReactNode;
  /** Motivo visible junto al botón. El id debe ser único en la página. */
  disabledReason?: { id: string; text: string };
}

/**
 * Botón destructivo: acción que borra o descarta datos (eliminar un registro, descartar cambios).
 *
 * El botón no pide confirmación por sí mismo: úsalo para abrir un `Dialog` y ejecuta la acción en su `onConfirm`.
 * Mientras la acción corre, pasa `busy` y `busyLabel`; el consumidor gestiona la operación.
 * Para un bloqueo previo, pasa `disabled` y un `disabledReason` visible.
 *
 * @example <ButtonDestructive onClick={abrirConfirmacion}>Eliminar registro</ButtonDestructive>
 * @example <ButtonDestructive disabled>Eliminando</ButtonDestructive>
 */
export function ButtonDestructive({ children = "Eliminar registro", className, type = "button", busy = false, busyLabel = "Eliminando", disabledReason, ...rest }: ButtonDestructiveProps) {
  const blocked = busy || rest.disabled || rest["aria-disabled"] === true || rest["aria-disabled"] === "true";
  const reason = blocked ? disabledReason : undefined;
  const describedBy = [rest["aria-describedby"], reason?.id].filter(Boolean).join(" ") || undefined;
  return (
    <>
    <button className={["btn btn--destructive", className].filter(Boolean).join(" ")} data-variant="destructive" type={type} {...rest} disabled={blocked} aria-busy={busy ? true : rest["aria-busy"]} aria-describedby={describedBy}>
      {busy ? busyLabel : children}
    </button>
    {reason ? <span className="btn__reason" id={reason.id}>{reason.text}</span> : null}
    </>
  );
}