Align
Organiza acciones en fila, columna o grupos adaptativos.
Buttons Pattern
Los botones organizan la acción dentro de la interfaz. Este patrón muestra cómo construir grupos de CTAs claros, jerárquicos y consistentes usando el framework.
Qué resuelve este patrón
Un patrón de botones necesita jerarquía entre acciones, disposición clara según el contexto y buen comportamiento responsive.
Este patrón muestra cómo usar el sistema para agrupar acciones principales, secundarias y terciarias sin mezclar decisiones aisladas ni estilos inconsistentes.
Módulos que intervienen
Spacing
Resuelve padding interno y separación entre acciones.
Text
Aplica mayúsculas, pesos y claridad visual en etiquetas de acción.
Radius
Define la forma de botones, pills o acciones suaves.
Visibility
Permite ajustar grupos de acciones según viewport.
Stack
Ayuda a integrar botones dentro de bloques o secciones más amplias.
Ejemplo visual del patrón
Código base del patrón
<div class="align align-col sm:align-row justify-center gap-2 wrap">
<a href="#" class="docs-btn docs-btn-primary">Primary Action</a>
<a href="#" class="docs-btn docs-btn-secondary">Secondary Action</a>
</div>La base del patrón es simple: un grupo flex con wrap y una jerarquía clara entre acción principal y acción secundaria.
Variantes comunes
Acción principal + secundaria
La variante más común en hero, cards o cierres.
Acción única
Ideal cuando hay una sola decisión clara.
Grupo inline
Útil para headers, toolbars o filtros.
Grupo apilado
Útil en móvil o cuando el bloque necesita más claridad vertical.
Lógica responsive del patrón
<div class="align align-col sm:align-row justify-center gap-2 wrap">
<a href="#" class="docs-btn docs-btn-primary">Primary</a>
<a href="#" class="docs-btn docs-btn-secondary">Secondary</a>
</div>- En móvil, las acciones pueden apilarse para mejorar claridad y toque.
- En pantallas mayores, el grupo puede pasar a fila.
- Wrap evita que los botones colapsen en espacios más reducidos.
Decisiones clave del patrón
Jerarquía clara
Debe existir una acción principal evidente. La secundaria acompaña, no compite.
Pocas acciones
Dos acciones suelen ser suficientes. Más botones debilitan el foco de decisión.
Forma consistente
Radius, padding y casing deben mantenerse constantes en todo el sistema de botones.
Responsive simple
El patrón debe reacomodarse con align antes de requerir variantes complejas.
Qué evitar en este patrón
Demasiados CTAs
Más de dos o tres acciones visibles diluyen la prioridad del bloque.
Misma jerarquía para todo
Si todos los botones parecen iguales, ninguna acción domina la decisión.
Padding inconsistente
Los botones no deben cambiar arbitrariamente de altura entre páginas.
Responsive roto
No fuerces botones inline cuando el espacio móvil necesita apilarlos.
Siguiente paso
Continúa con pattern dashboard para revisar un patrón más estructural y modular.