> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-button-group.md). # AX - Grupo de botones ## Resumen **AX - Grupo de botones** es un componente de Experience Cloud que muestra varios botones relacionados juntos como un grupo unificado en las páginas de Experience Sites. Úsalo para presentar acciones relacionadas una junto a otra—como "Guardar" y "Cancelar", "Editar" y "Eliminar", u opciones de navegación para distintas secciones. Los botones permanecen visualmente conectados como una sola unidad, dejando claro que son opciones relacionadas. Perfecto para acciones de formularios, opciones de gestión de registros, navegación tipo pestañas o cualquier lugar donde los usuarios del portal necesiten elegir entre varias acciones relacionadas. *** ## Configuración del Grupo de botones Sigue estos pasos para adaptar el componente Avonni Button Group y ajustarlo perfectamente al diseño y la funcionalidad de tu sitio de Experience Cloud: ### **Ajustes clave** #### **Mostrar como fila** Activa este ajuste para organizar los botones horizontalmente en la pantalla. Desactivarlo los apilará verticalmente. #### **Botones visibles** Este ajuste determina el número máximo de botones visibles directamente en pantalla. Si tienes más botones que el número especificado, los restantes se colocarán en un menú desplegable práctico. #### **Menú de botones** * **Etiqueta:** Establece el texto que se muestra en el botón que abre el menú desplegable que contiene botones adicionales. * **Nombre del icono:** En el menú de botones, selecciona un icono apropiado (consulta Salesforce Lightning Design System para ver los iconos disponibles). * **Variante:** Elige el estilo visual para el menú de botones (por ejemplo, 'neutral', 'brand', 'inverse'). * **Alineación del menú:** Selecciona cómo se posicionará el menú desplegable con respecto al botón ('izquierda' o 'derecha'). #### **Botones** * **Etiqueta:** Introduce el texto que quieres que aparezca en el botón. * **Nombre del icono:** Si lo deseas, elige un icono para colocarlo en el botón. * **Posición del icono:** Especifica si el icono debe estar a la 'izquierda' o a la 'derecha' de la etiqueta del botón. * **Variante:** Puedes seleccionar la apariencia del botón entre los estilos predefinidos ('neutral', 'brand', 'destructive', etc.). * **Deshabilitado:** Activa este ajuste si quieres que el botón comience en estado deshabilitado, impidiendo la interacción del usuario. * **Oculto:** Activa este ajuste si quieres que el botón esté inicialmente oculto. * **Interacción al hacer clic:** Esta sección crucial te permite definir qué sucede cuando un usuario hace clic en el botón. Consulta la página de documentación "On Click Interactions" para obtener una lista completa de posibles acciones y configuraciones. ### **Consideraciones importantes** * Diseña tu Grupo de botones teniendo en cuenta una jerarquía visual clara. Usa la variante 'brand' para resaltar las acciones principales. * Usa la variante 'destructive' con moderación para acciones que tengan consecuencias significativas. * Asegúrate de que las etiquetas de los botones sean concisas y describan con precisión su función. * Prueba siempre a fondo la configuración de tu Grupo de botones en distintos dispositivos y navegadores para garantizar una experiencia de usuario óptima. *** ## Apariencia de estilo El componente Avonni Button Group ofrece opciones de estilo completas para personalizar su apariencia dentro de tu sitio de Experience Cloud. A continuación se muestra un desglose de los atributos de estilo disponibles:
Etiqueta/Icono * **color:** Establece el color predeterminado del texto o del icono. * **color activo:** Establece el color del texto o del icono cuando el botón está activo (se hace clic en él o tiene el foco). * **color al pasar el cursor:** Establece el color del texto o del icono cuando el usuario pasa el ratón sobre el botón. * **familia de fuente:** Especifica la fuente que se usará para el texto del botón. * **tamaño de fuente:** Controla el tamaño del texto del botón. * **estilo de fuente:** Establece el estilo de la fuente (por ejemplo, normal, cursiva, oblicua). * **peso de fuente:** Determina el grosor del texto del botón (por ejemplo, normal, negrita, más negrita).
Fondo * **color:** Establece el color de fondo predeterminado del botón. * **color activo:** Establece el color de fondo cuando el botón está activo. * **color al pasar el cursor:** Establece el color de fondo cuando el usuario pasa el ratón sobre el botón.
Borde * **color:** Establece el color predeterminado del borde. * **color activo:** Establece el color del borde cuando el botón está activo. * **color al pasar el cursor:** Establece el color del borde cuando el usuario pasa el ratón sobre el botón. * **tamaño:** Controla el ancho del borde. * **estilo:** Especifica el estilo del borde (por ejemplo, sólido, discontinuo, punteado).
*** ### **Ejemplo de uso** Para crear un grupo de botones con fondo rojo, texto blanco y un sutil efecto al pasar el cursor, considera la siguiente configuración: ``` Etiqueta/Icono: color: blanco color al pasar el cursor: #f5f5f5 Fondo: color: rojo Borde: color: rojo ``` ### **Notas importantes** * Usa un selector o generador de colores web para encontrar los códigos de color que desees. * Procura mantener la coherencia con el diseño general y la combinación de colores de tu sitio de Experience Cloud. * Prueba siempre tus cambios de estilo para garantizar el efecto visual deseado y la accesibilidad. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-button-group.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.