Botón principal.

<div class="ui-sample ui-actions"><button class="btn btn--primary" data-variant="primary" type="button">Guardar cambios</button></div>

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

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

export interface ButtonPrimaryProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Texto de la acción, en infinitivo o sustantivo corto. */
  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 principal: la acción más importante de la vista (guardar, publicar, pagar); uno por superficie.
 *
 * 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 <ButtonPrimary onClick={guardar}>Guardar cambios</ButtonPrimary>
 * @example <ButtonPrimary disabled>Guardando</ButtonPrimary>
 */
export function ButtonPrimary({ children = "Guardar cambios", className, type = "button", busy = false, busyLabel = "Guardando", disabledReason, ...rest }: ButtonPrimaryProps) {
  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--primary", className].filter(Boolean).join(" ")} data-variant="primary" 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}
    </>
  );
}