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:
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.
Última actualización
¿Te fue útil?