Controles · buttons

Botones

Propuesto2026-10-02 · Rechazado por el founder («naranjo con fondo negro»: la revisión se mostró en modo oscuro). Vuelve a revisión sobre superficie blanca, el modo del sistema.

Acciones.

Vista · datos de ejemplo

Anatomía

Principal: naranja lleno con texto blanco, sobre superficie blanca; con flecha si lleva a otro paso
Secundario: borde de 1 px
Texto: naranja sin borde
Chico 32 px, normal 44 px, grande 56 px

Sí

Un solo principal por vista
Texto regular (400)

No dos principales juntos
No esquinas redondeadas ni negrita

HTML exacto

<div class="nu-tarjeta" style="padding:24px">
  <div class="nu-botones">
    <button type="button" class="nu-boton nu-boton--principal">Guardar →</button>
    <button type="button" class="nu-boton">Cancelar</button>
    <button type="button" class="nu-boton nu-boton--texto">Ver detalle</button>
    <button type="button" class="nu-boton nu-boton--chico"><span class="nu-icono nu-icono--chico" data-icono="download"></span>Descargar PDF</button>
    <button type="button" class="nu-boton" disabled>Sin permiso</button>
  </div>
  <div class="nu-botones" style="margin-top:16px">
    <button type="button" class="nu-boton nu-boton--principal nu-boton--grande">Emitir 3 guías →</button>
  </div>
</div>

Clases: .nu-boton .nu-boton--principal .nu-boton--texto .nu-boton--chico .nu-boton--grande .nu-botones · Fragmento: snippets/buttons.html