Acción discreta.

<div class="ui-sample ui-actions"><button class="btn btn--quiet" data-variant="quiet" type="button">Ver detalles</button></div>

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

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

export interface ButtonQuietProps 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 discreto: acción de poco peso visual para consultas o pasos terciarios (ver detalles, mostrar más).
 *
 * 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 <ButtonQuiet onClick={verDetalles}>Ver detalles</ButtonQuiet>
 * @example <ButtonQuiet disabled>Cargando detalle</ButtonQuiet>
 */
export function ButtonQuiet({ children = "Ver detalles", className, type = "button", busy = false, busyLabel = "Cargando detalle", disabledReason, ...rest }: ButtonQuietProps) {
  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--quiet", className].filter(Boolean).join(" ")} data-variant="quiet" 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}
    </>
  );
}