Toolbar
Agrupa las acciones frecuentes de una vista en una sola fila. Pensada para tareas rápidas sobre el contenido actual: guardar, compartir, archivar o cambiar el formato.
Default
Cuándo usar
- Reunir acciones frecuentes que aplican al contenido principal de la vista.
- En editores y vistas de detalle, encima del contenido.
- Para agrupar acciones que el usuario invoca varias veces seguidas.
Cuándo no usarlo
- Para la navegación principal: usa el menú lateral o tabs.
- Para acciones primarias únicas de la pantalla: usa un botón destacado.
- Si las acciones cambian según la selección, usa un menú contextual.
Con toggle
Botones de estado on/off
Usa ToolbarToggleButton cuando el botón refleja un estado activable: formato, vista, filtros. Agrupa los toggles relacionados con un mismo name.
Tamaños
Small, medium y large
Accesibilidad
Roles y teclado
- El contenedor tiene role="toolbar" y siempre debe llevar aria-label descriptivo.
- La navegación entre botones usa flechas izquierda y derecha; Home y End saltan al primero y al último.
- Cada toggle debe tener aria-label si solo muestra icono.
- Agrupa toggles relacionados con un mismo name; los separadores no son focuseables.
Contenido
Etiquetas y orden
- Ordena las acciones de más usadas a menos usadas, de izquierda a derecha.
- Iconos consistentes en peso y trazo: usa Material Symbols Outlined wght 500.
- Si hay más de seis acciones, agrupa con dividers o mueve secundarias a un overflow.
- Reserva acciones destructivas (eliminar) al final, separadas por divider.