Contenidos · Botones
Buttons (botones y acciones)
Construye acciones consistentes con una base proporcional, variantes semánticas, botones de icono y una escala tipográfica que modifica todo el componente.
Siete variantes
Primary, secondary, success, danger, warning, dark y light.
Escala proporcional
Padding, altura, radio e iconos crecen junto con el tamaño tipográfico.
Estados accesibles
Incluye foco visible, hover, active, disabled y reduced motion.
Código + resultado
Ejemplos reales de botones
Selecciona una clase para comparar el marcado y el componente renderizado por QuicklyCSS.
<button class="btn btn-primary" type="button">Acción principal</button>
<button class="btn btn-secondary" type="button">Acción secundaria</button>
<button class="btn btn-success" type="button">Guardar cambios</button>
<button class="btn-ico btn-primary" type="button" aria-label="Favorito">★</button>
<button class="btn btn-primary btn-fs-4" type="button">Botón de 20px</button>
<button class="btn btn-secondary" type="button" disabled>Acción deshabilitada</button>
Referencia
Clases de botones
La referencia agrupa la base, las variantes, los estados y la escala tipográfica del sistema.
| Clases | Alias | Función | Uso recomendado |
|---|---|---|---|
.btn | — | Base con texto | Combinar con una variante semántica. |
.btn-ico | — | Botón cuadrado | Acciones representadas únicamente por un icono. |
.btn-primary | .btn-p | Acción principal | CTA prioritario de una vista. |
.btn-secondary | .btn-s | Acción secundaria | Alternativa a la acción principal. |
.btn-success | .btn-g | Confirmación positiva | Guardar, aprobar o completar. |
.btn-danger | .btn-d | Acción destructiva | Eliminar, rechazar o cancelar definitivamente. |
.btn-warning | .btn-w | Advertencia | Acciones que requieren precaución. |
.btn-dark | .btn-k | Variante oscura | Contraste fuerte en superficies claras. |
.btn-light | .btn-l | Variante clara | Acciones discretas sobre fondos neutros. |
.btn-font-size-01–07 | .btn-fs-01–07 | 15px a 9px | Interfaces compactas, chips o controles densos. |
.btn-font-size-0 | .btn-fs-0 | 16px | Tamaño base del sistema. |
.btn-font-size-1–40 | .btn-fs-1–40 | 17px a 56px | Acciones progresivamente más destacadas. |
[disabled] | .is-disabled | Estado inactivo | Preferir el atributo nativo en elementos button. |
.ico | — | Icono interno de 1em | SVG, elemento i o span dentro del botón. |
.ico-left | — | Margen derecho | Icono situado antes del texto. |
.ico-right | — | Margen izquierdo | Icono situado después del texto. |
.btn-primary mantiene texto blanco con contraste 6.70:1 en reposo y 8.72:1 durante :hover. Sus bordes y el foco visible conservan al menos 3:1 frente a superficies claras y oscuras. .btn-dark utiliza un borde perceptible y aclara su superficie durante :hover para no confundirse con fondos oscuros.Recomendaciones
Buenas prácticas con botones
Una acción principal
Evita competir visualmente con varios botones primary dentro del mismo contexto.
Texto específico
Usa etiquetas que describan la acción, como “Guardar cambios” o “Descargar”.
Iconos accesibles
Proporciona aria-label cuando un botón no contiene texto visible.
Disabled con contexto
Explica qué condición debe cumplirse para habilitar una acción bloqueada.