Button

export function ButtonMatrix() {
  const [guardando, setGuardando] = useState(false)

  return (
    <Stage label="Button · la barra de acciones de una pantalla, y después la referencia" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-5">
        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            El uso de verdad: la barra de una pantalla de reservas, con `icon`, `iconRight` y el
            estado de guardado
          </span>
          <div className="flex flex-wrap items-center gap-2 rounded-xl border border-content/10 bg-container p-3">
            <Button
              variant="primary"
              size="sm"
              icon={IconPlus}
              loading={guardando}
              loadingText="Guardando…"
              onClick={() => {
                setGuardando(true)
                setTimeout(() => setGuardando(false), 1200)
              }}
            >
              Nueva reserva
            </Button>
            <Button variant="secondary" size="sm" iconRight={IconExternalLink}>
              Exportar a planilla
            </Button>
            <Button variant="ghost" size="sm" icon={IconSearch}>
              Buscar
            </Button>
            <Button variant="danger" size="sm" icon={IconX}>
              Cancelar evento
            </Button>
            <Button variant="link" size="sm">
              Ver el contrato
            </Button>
          </div>
          <span className="text-[11px] text-content/60">
            `loading` deshabilita el botón y cambia el texto por `loadingText` mientras dura: es la
            prop que evita el doble submit, y es lo que un consumidor reimplementa a mano cuando no
            sabe que existe. Apretá «Nueva reserva» para verlo.
          </span>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">variant · las nueve con nombre propio</span>
          <Row>
            {BUTTON_VARIANTS.map((v) => (
              <Button key={v} variant={v} size="sm">
                {v}
              </Button>
            ))}
          </Row>
          <span className="text-xs text-content/50">
            …y los dos ALIAS: mismas clases, otro nombre. Existen para el que viene de shadcn.
          </span>
          <Row>
            {BUTTON_ALIAS.map((a) => (
              <Button key={a.variant} variant={a.variant} size="sm">
                {a.variant} = {a.igualA}
              </Button>
            ))}
          </Row>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            size · las cuatro con texto, más `icon` — la quinta, cuadrada y sin texto
          </span>
          <Row>
            {BUTTON_SIZES.map((t) => (
              <Button key={t} variant="secondary" size={t}>
                {t}
              </Button>
            ))}
            <Button variant="secondary" size="icon" icon={IconSettings} aria-label="Ajustes" />
            <Button variant="primary" size="sm" disabled>
              disabled
            </Button>
          </Row>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            fullWidth · es una prop, no un `className` — el botón de un formulario en teléfono
          </span>
          <div className="w-full max-w-[260px]">
            <Button variant="primary" size="md" fullWidth icon={IconCheck}>
              Confirmar la reserva
            </Button>
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · ButtonMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.