Back-button

# Back button

El botón de "Volver" (*Back button*) es un control de navegación que permite al usuario regresar al nivel jerárquico anterior, al listado previo de origen o a la pantalla inmediatamente anterior en el flujo de la aplicación.

Cuándo usarlo

- Para volver a la vista maestra o tabla de datos después de consultar o editar un detalle. - En flujos multi-paso, para retroceder a un paso previo. - En páginas de detalle profundamente anidadas donde la vuelta atrás es la acción secundaria o de escape principal.

Cuándo no usarlo

- Como reemplazo de la navegación por "Migas de pan" (*Breadcrumbs*) cuando la estructura tiene muchos niveles y el usuario necesita ubicarse geográficamente. - Como un botón primario de un formulario (para eso usa el componente Button estándar).

Semántica: ¿Enlace <a> o Botón <button>?

Dependiendo del comportamiento técnico de la acción "volver", se debe elegir la etiqueta HTML adecuada, manteniendo intacta la misma apariencia visual:

• Usar enlace (<a>): Cuando el destino de "volver" es una URL o ruta estática y predecible (ej: la ruta padre /listado). Es más robusto y permite funcionalidades de navegador como "Abrir en pestaña nueva".
• Usar botón (<button type="button">): Cuando la acción se controla dinámicamente mediante JavaScript (ej: window.history.back()) o requiere el control del flujo del router cliente interno sin cambiar de página completa.

Accesibilidad

• Semántica: El uso de la etiqueta HTML apropiada (<a> vs <button>) según el contexto es vital para que las tecnologías de asistencia sepan si están a punto de cambiar de URL o de ejecutar una acción en la misma interfaz.
• Foco visible: El componente posee un estado de foco de alto contraste que combina el halo exterior azul con un fondo leve y modificación de color.
• Icono oculto al Screen Reader: El icono de flecha tiene aria-hidden="true", permitiendo que el nombre accesible del componente recaiga completamente sobre el texto visible claro (ej: "Volver a inicio"), que no sufre redundancia.

Estados visuales

• Default: Texto de color principal con subrayado simple e icono al mismo nivel.
• Hover: Incremento del grosor del subrayado y cambio de color del texto y el icono para mejorar la affordance interactiva.
• Focus: Eliminación provisional de grosor extra de subrayado junto a la aparición de un box-shadow doble alrededor de toda el área interactiva. Cambio de color del texto hacia el color primario de énfasis en este estado.

<a href="#" class="back-button">
  <span class="back-button__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="20" height="20" focusable="false">
      <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
    </svg>
  </span>
  <span class="back-button__text">Volver</span>
</a>