Sistema de Botones y Acciones

¿Qué hace Sistema de Botones y Acciones?

Propósito

El Sistema de Botones y Acciones proporciona una metodología para diseñar los principales impulsores de la interacción del usuario. Los botones son el vínculo fundamental entre la intención de un usuario y la respuesta de un sistema. Este sistema garantiza que cada acción sea visualmente priorizada (Jerarquía), tenga un estilo consistente (Cohesión) y sea fácil de interactuar en todos los dispositivos (Usabilidad). Va más allá de "crear un botón" para definir un marco lógico de cómo los diferentes tipos de acciones se relacionan entre sí dentro de un diseño.

Casos de Uso

• Definir una librería de componentes de botones para un sistema de diseño.
• Establecer una jerarquía de acciones en una sección Hero o en el Encabezado de una página.
• Organizar grupos de acciones relacionadas (p. ej., Guardar, Cancelar, Eliminar).
• Diseñar disparadores especializados como botones solo con ícono o botones de acción flotante (FABs).
• Estandarizar la relación entre los tamaños de los botones y la densidad del diseño.

Cuándo NO Usarlo

• Enlaces de Navegación Global: Para moverse entre secciones principales del sitio, use site-navigation-system.
• Hipervínculos en Texto: Para enlaces incrustados dentro de un párrafo de texto que llevan a más información, use tratamientos de tipografía estándar.
• Elementos Puramente Decorativos: No use estilos de botón para elementos que no se pueden hacer clic o tocar.
• Entradas de Formulario Complejas: Para seleccionar opciones (Casillas de verificación, Radios, Selectores), use form-design-system.

Entradas

1. Prioridad de Acción: ¿La tarea es Primaria (Nivel 1), Secundaria (Nivel 2) o Terciaria (Nivel 3)?
2. Gravedad de Acción: ¿La acción es "Positiva" (Enviar), "Neutral" (Cancelar) o "Destructiva" (Eliminar)?
3. Densidad Contextual: ¿Dónde vive el botón? (p. ej., un Hero espacioso vs. una fila compacta de una Tabla de Datos).
4. Tokens de Marca: Paleta de colores, escala tipográfica y preferencias de radio de esquina.

Salidas

1. Matriz de Variantes de Botón: Estilos definidos para las variantes Primario, Secundario, Fantasma y Peligro.
2. Escala de Tamaños: Un rango de alturas y rellenos (p. ej., Pequeño, Mediano, Grande).
3. Especificación de Anatomía: Reglas de espaciado interno para texto, íconos y contenedores.
4. Reglas de Agrupación de Acciones: Directrices para la alineación, el orden y el espaciado entre múltiples botones.

Flujo de Trabajo

1. Establecer la Jerarquía de Variantes

Asignar pesos visuales a los botones según su importancia para el objetivo del usuario:

• Primario (Nivel 1): Fondo relleno de alto contraste. Generalmente el objetivo "principal" de la página. Solo uno por vista.
• Secundario (Nivel 2): Fondo delineado o de bajo contraste. Se usa para acciones alternativas o de apoyo.
• Terciario/Fantasma (Nivel 3): Sin fondo ni borde en su estado predeterminado. Se usa para tareas de baja prioridad o dentro de una UI densa (como tablas).
• Peligro: Color de alto contraste (generalmente Rojo). Se usa estrictamente para acciones destructivas y permanentes.

2. Definir la Escala de Tamaños

Mapear las dimensiones del botón al contexto del diseño usando el fluid-spacing-system:

• Grande (Hero/Landing): Máxima prominencia. Alto relleno vertical.
• Mediano (Predeterminado): El estándar para formularios, modales y encabezados.
• Pequeño (Compacto): Se usa en barras laterales, tarjetas y tablas de datos donde el espacio es limitado.

3. Diseñar la Anatomía Interna

Estandarizar la estructura del contenedor del botón:

• Relleno: Mantener una relación horizontal vs. vertical consistente (generalmente horizontal = 1.5x a 2x vertical).
• Integración de Íconos: Definir el espacio entre un ícono y el texto (p. ej., --space-xs).
• Radio de Esquina: Determinar la "redondez" (Filo, Redondeado o Píldora) para que coincida con el tono visual de la marca.

4. Crear Grupos de Botones

Al colocar múltiples acciones juntas, seguir un orden lógico:

• Orden: Colocar la acción Primaria en la posición de "conclusión" (Derecha en escritorio, Arriba en una pila vertical móvil).
• Espaciado: Usar un espacio consistente (p. ej., --space-s) entre los botones de un grupo.
• Alineación: Alinear a la derecha las acciones en modales/encabezados; Alinear a la izquierda en formularios; Centrar en Heroes.

5. Definir el Comportamiento Responsivo

Asegurar que las acciones sigan siendo utilizables en todos los tamaños de pantalla:

• Botones de Ancho Completo (Bloque): En móvil, los botones pequeños a menudo se expanden para llenar el ancho del contenedor para facilitar el alcance del pulgar.
• Respaldo Solo con Ícono: En encabezados extremadamente estrechos, las etiquetas de texto pueden ocultarse en favor de íconos (asegurar que aria-label esté presente).

Reglas de Decisión

• La Regla "Un Primario": Solo debe haber un botón Primario (Nivel 1) visible en cualquier vista/contexto para evitar la "parálisis de elección".
• Fantasma vs. Enlace: Usar un botón Fantasma cuando la acción sea funcional (p. ej., "Cerrar", "Cancelar"); usar un enlace de texto cuando la acción sea de navegación (p. ej., "Más información sobre nuestra política").
• Ubicación del Ícono: Usar un ícono inicial (Izquierda) para aclarar la acción (p. ej., un ícono de Búsqueda); usar un ícono final (Derecha) para indicar dirección (p. ej., una Flecha para "Siguiente Paso").
• Contraste para Peligro: Los botones destructivos deben verse significativamente diferentes de los botones Primarios para evitar clics accidentales.

Restricciones

• Accesibilidad: El texto debe cumplir con el contraste AA de WCAG (4.5:1). Los elementos interactivos deben tener un estado de focus claro (ver interactive-state-system).
• Objetivos Táctiles: Todos los botones deben tener un área interactiva mínima de 24x24px (WCAG 2.2 SC 2.5.8), incluso si el elemento visual es más pequeño; usar 44x44px como el valor predeterminado cómodo para acciones primarias y diseños móviles.
• Truncamiento: El texto del botón nunca debe truncarse. Si la etiqueta es demasiado larga, reevaluar el texto o permitir que el botón se envuelva/expanda.

Patrones de Falla Comunes

• Sopa de Botones: Usar 3-4 botones Primarios en una página, lo que diluye la importancia de la CTA principal.
• La "Zona Gris": Hacer que los botones parezcan elementos deshabilitados porque carecen de suficiente contraste o color.
• Interacción Perdida: No definir los estados hover o active, dejando al usuario inseguro de si su clic fue registrado.
• Objetivos Diminutos: Diseñar botones fantasma pequeños y solo con texto que son casi imposibles de golpear en una pantalla móvil.
• Alineación Confusa: Mezclar diferentes alineaciones de botones en el mismo flujo, obligando al usuario a "cazar" la siguiente acción.

Criterios de Validación

• Cada página/vista tiene una acción Primaria clara.
• Las variantes de botón (Primario, Secundario, Fantasma, Peligro) se usan de manera consistente.
• Los botones cumplen con el objetivo táctil mínimo de 24x24px de WCAG 2.2 (2.5.8), usando 44x44px para acciones primarias y móviles.
• La jerarquía visual se mantiene cuando los botones se agrupan.
• Los estados de foco son distintos y de alto contraste.
• Las etiquetas de los botones son concisas y usan "Verbos de Acción" (p. ej., "Guardar", "Crear", "Unirse").
• Las vistas móviles usan botones de ancho completo donde sea apropiado para la capacidad de alcance.