Botones
Un botón principal por vista. Los demás son secundarios. Todos comparten alto, radio, tipografía y estados; el deshabilitado es azul claro, nunca gris.
Variantes
<button type="button" class="btn btn-primary">
<i class="ri-contacts-fill"></i>Registrar seguimiento
</button>
<button type="button" class="btn btn-light">
<i class="ri-mail-line"></i>Correo
</button>
<button type="button" class="btn btn-danger">
<i class="ri-delete-bin-line"></i>Eliminar
</button>
<button type="button" class="btn btn-success">
<i class="ri-check-line"></i>Aprobar
</button>Sobre fondo oscuro
Con variant light (principal, blanco) y outline-light (fantasma: transparente, se aclara al pasar el cursor). Úsalos en banners y portadas.
<x-maristas::button variant="light" icon="ri-add-line">Principal</x-maristas::button>
<x-maristas::button variant="outline-light" icon="ri-price-tag-3-line">Fantasma</x-maristas::button>Tamaños
Pequeño dentro de tarjetas, tablas y barras de herramientas; normal para la acción principal de la página; grande en pantallas táctiles o para una acción única y destacada.
<button type="button" class="btn btn-primary btn-sm">
Pequeño
</button>
<button type="button" class="btn btn-primary">
Normal
</button>
<button type="button" class="btn btn-primary btn-lg">
Grande
</button>
<button type="button" class="btn btn-light btn-sm">
Pequeño secundario
</button>
<button type="button" class="btn btn-light btn-lg">
Grande secundario
</button>Estados
<button type="button" class="btn btn-primary" disabled="disabled">
<i class="ri-send-plane-2-line"></i>Publicar nota
</button>
<button type="button" class="btn btn-light" disabled="disabled">
Deshabilitado
</button>
<button type="button" class="btn btn-primary" disabled="disabled">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Enviando…
</button>Solo ícono
Siempre con aria-label y title, porque no tiene texto.
<button type="button" class="btn btn-light btn-sm" aria-label="Editar" title="Editar">
<i class="ri-pencil-fill"></i>
</button>
<button type="button" class="btn btn-light btn-sm" aria-label="Descargar" title="Descargar">
<i class="ri-download-2-line"></i>
</button>
<button type="button" class="btn btn-light btn-sm" aria-label="Más acciones" title="Más acciones">
<i class="ri-more-2-fill"></i>
</button>Botón punteado (editar)
La acción de editar de un bloque: «Editar contacto», «Editar estudiante». Es un botón pequeño con borde punteado azul y lápiz. Bloqueado, aparece con candado y atenuado, y explica el motivo al pasar el cursor.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-sm mr-btn-dashed" data-bs-toggle="modal" data-bs-target="#kit-editar-modal" ><i class="ri-pencil-fill"></i>Editar contacto</button>
<button type="button" class="btn btn-sm mr-btn-dashed" disabled title="Los datos ya fueron confirmados y no se pueden editar"><i class="ri-lock-line"></i>Estudiante bloqueado</button>
</div>
Sí
Nombra el botón con el verbo de lo que hace: «Guardar cambios», «Registrar seguimiento». Mantén el mismo nombre en todo el flujo.
No
No pongas dos botones principales en la misma vista. No uses «Aceptar», «Enviar» o «OK» sin decir qué se acepta o se envía.