Icon Button

El Icon button es un botón circular que muestra solo un ícono. Sirve para acciones compactas y reconocibles, como cerrar, buscar o eliminar un elemento de una lista.

Propiedades y configuraciones

Cuando usarlo

Úsalo para acciones que se entienden de inmediato con un ícono de uso universal (cerrar, buscar, menú, notificaciones) o para acciones que se repiten en cada fila de una lista (editar, eliminar), donde una etiqueta por fila sería ruido.

Si la acción no es evidente sin texto, o es la acción principal del flujo, usa Button con etiqueta (con o sin ícono). Para llevar a otra página, usa Link; si es una navegación compacta y reconocible (por ejemplo, la campana que abre las notificaciones), puedes usar la apariencia de Icon button sobre un enlace <a href>.

Buenas prácticas

Recomendado: Reserva el Icon button para íconos universales

Buscar, notificaciones, menú o cerrar se entienden sin texto. Las acciones propias del trámite necesitan etiqueta.

Recomendado: Nombra la acción y sobre qué actúa

En una lista, cada botón se ve igual. “Eliminar a Tomás Rojas” lo distingue del resto; “Eliminar” se repetiría en todas las filas. Usa ese nombre en el aria-label y en el tooltip.

Recomendado: Mantén el área táctil aunque el espacio sea reducido

En listas y en móvil, no achiques el Icon button: conserva sus 44 × 44 px y deja espacio entre uno y otro para tocar el correcto sin error.

Malas prácticas

No recomendado: No uses íconos ambiguos para acciones del trámite

“Postular”, “Firmar” o “Ver resolución” no tienen ícono universal: la persona tiene que adivinar.

No recomendado: No uses el Icon button como acción principal

Enviar una solicitud con solo una flecha pasa desapercibido y no anticipa el resultado. Usa un Button con etiqueta.

No recomendado: No abuses del Primary en Icon buttons

Muchos círculos Primary por fila generan ruido y compiten con el botón principal de la página.

No recomendado: No agrupes muchos Icon buttons sin jerarquía

Siete íconos seguidos se vuelven un acertijo. Muestra solo los más frecuentes y agrupa el resto en un menú.

Recomendaciones de accesibilidad

Dale siempre un nombre accesible
Como no hay texto visible, el <button> necesita aria-label (p. ej. “Cerrar diálogo”). Sin él, el lector de pantalla solo anuncia “botón”. Si navega, debe ser un <a href> y su aria-label nombra el destino (“Ver notificaciones”), no el ícono.

Nombra la acción y su objeto
En listas, repite el contexto en el nombre: “Eliminar a Tomás Rojas”, no solo “Eliminar”. Así cada botón se distingue al recorrerlos con teclado o en la lista de controles del lector.

Oculta el ícono a las tecnologías de asistencia
El __icon va con aria-hidden="true": el significado está en el aria-label del botón, no en el glifo.

Considera a quien no reconoce el ícono
El aria-label no ayuda a personas videntes con baja alfabetización digital. Para acciones menos comunes, prefiere texto visible o un tooltip además del nombre accesible.

Informa el estado cuando el botón alterna
Si el Icon button abre o cierra algo (menú, panel), refleja el estado con aria-expanded; si activa o desactiva una opción, con aria-pressed.

Deja espacio entre botones contiguos
El área de 44×44 px cumple el tamaño mínimo de objetivo táctil; separa los botones vecinos para evitar toques accidentales, sobre todo en acciones destructivas como eliminar.