# Buttons (botones y acciones)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/buttons.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Botones

Construye acciones consistentes con una base proporcional, variantes semánticas, botones de icono y una escala tipográfica que modifica todo el componente.

v2.0

●

## 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.

i

## Composición básica
Combina `.btn` con una variante como `.btn-primary`. Usa `.btn-ico` cuando la acción contiene únicamente un icono.

✦

## Alias reales
Las variantes aceptan alias cortos como `.btn-p` y la escala tipográfica puede escribirse como `.btn-font-size-{n}` o `.btn-fs-{n}`.

Código + resultado

## Ejemplos reales de botones

Selecciona una clase para comparar el marcado y el componente renderizado por QuicklyCSS.

HTML

Resultado aplicado  Primary

Componente real

.btn aporta la estructura y .btn-primary aplica la variante semántica principal.

```html
<button class="btn btn-primary" type="button">Acción principal</button>
```

.btn-secondary utiliza la paleta secundaria y conserva todos los estados de la base.

```html
<button class="btn btn-secondary" type="button">Acción secundaria</button>
```

.btn-success comunica una acción satisfactoria o confirmación positiva.

```html
<button class="btn btn-success" type="button">Guardar cambios</button>
```

.btn-ico mantiene ancho y alto proporcionales. Añade siempre un nombre accesible al botón.

```html
<button class="btn-ico btn-primary" type="button" aria-label="Favorito">★</button>
```

.btn-fs-4 fija font-size: 1.25rem; las dimensiones en em escalan con el texto.

```html
<button class="btn btn-primary btn-fs-4" type="button">Botón de 20px</button>
```

El atributo disabled reduce la opacidad, elimina la interacción y comunica el estado al navegador.

```html
<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. |

Regla del sistema  El tamaño del botón depende de su font-size: padding, altura mínima, radio, separación e iconos utilizan unidades em.

Contraste WCAG AA  `.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

01
### Una acción principal
Evita competir visualmente con varios botones primary dentro del mismo contexto.

02
### Texto específico
Usa etiquetas que describan la acción, como “Guardar cambios” o “Descargar”.

03
### Iconos accesibles
Proporciona `aria-label` cuando un botón no contiene texto visible.

04
### Disabled con contexto
Explica qué condición debe cumplirse para habilitar una acción bloqueada.