Back button
Control de navegación para volver a la pantalla o nivel anterior.
Estado: review
1. Estado Default: Semántica de Enlace
Mostrar HTML
<a href="#" class="gn-back-button">
<svg class="gn-back-button__icon" aria-hidden="true" viewBox="0 0 24 24" 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 class="gn-back-button__text">Volver a inicio</span>
</a>2. Estado Hover
Mostrar HTML
<a href="#" class="gn-back-button is-hover">
<svg class="gn-back-button__icon" aria-hidden="true" viewBox="0 0 24 24" 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 class="gn-back-button__text">Volver</span>
</a>3. Estado Focus
Mostrar HTML
<a href="#" class="gn-back-button is-focus">
<svg class="gn-back-button__icon" aria-hidden="true" viewBox="0 0 24 24" 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 class="gn-back-button__text">Volver al listado</span>
</a>4. Alternativa: Semántica de Botón
Usar cuando el control de navegación requiera JavaScript o dependa del historial del
navegador (ej: history.back()).
Mostrar HTML
<button type="button" class="gn-back-button" onclick="history.back()">
<svg class="gn-back-button__icon" aria-hidden="true" viewBox="0 0 24 24" 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 class="gn-back-button__text">Volver atrás</span>
</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-shadowdoble alrededor de toda el área interactiva. Cambio de color del texto hacia el color primario de énfasis en este estado.