# 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. ```tsx import { Toolbar, ToolbarButton, ToolbarDivider } from "@fluentui/react-components"; }>Guardar }>Compartir }>Archivar ``` ## 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`. ```tsx } /> } /> } /> }>Lista ``` ## Tamaños ### Small, medium y large ```tsx … … … ``` ## 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.