# AX - Botón ## Descripción general **AX - Botón** es un componente de Experience Cloud que crea botones clicables en las páginas de Experience Sites para activar acciones como navegación, envíos de formularios, creación de registros o apertura de modales. Úsalo para agregar llamadas a la acción personalizadas, enviar formularios, navegar a páginas específicas, crear registros o activar flujos. Configura la etiqueta, el estilo, el icono y la acción del botón en Experience Builder sin código. Perfecto para CTA de portales, navegación personalizada, acciones de "Contáctanos", flujos de creación de registros o cualquier interacción de usuario que requiera un botón claro y con la marca. *** ## **Configuración de tu botón** Después de arrastrar AX - Botón a tu página en Experience Builder, configurarás dos aspectos principales: cómo se ve el botón y qué ocurre cuando los usuarios hacen clic en él. ### **Apariencia del botón** Estas configuraciones controlan cómo se ve tu botón en la página. **Etiqueta** – El texto que se muestra en el botón. Mantenlo breve y orientado a la acción (por ejemplo, "Enviar solicitud", "Ver detalles", "Contáctanos"). **Nombre del icono** – Agrega un icono junto a la etiqueta para ayudar a los usuarios a comprender rápidamente la acción. Elige de la biblioteca de iconos de Salesforce: opciones comunes incluyen "utility:download" para descargas o "utility:email" para acciones de contacto. **Posición del icono** – Coloca el icono a la izquierda o a la derecha de la etiqueta. La posición a la izquierda funciona bien en la mayoría de los casos, mientras que la posición a la derecha puede indicar una navegación hacia adelante. **Variante** – El estilo visual del botón. Las opciones suelen incluir primario (negrita, llamativo), secundario (sutil) o destructivo (rojo, para acciones de eliminación). Elige según la importancia de la acción. **Alineación Horizontal** – Posiciona el botón dentro de su contenedor: izquierda, centrado o derecha. La alineación centrada funciona bien para CTA independientes, mientras que la alineación a la izquierda es adecuada para botones de formularios. **Estirar** – Cuando está habilitado, el botón se expande para rellenar todo el ancho de su contenedor. Usa esto para CTA prominentes o cuando quieras que el botón coincida con el ancho de los campos del formulario arriba. **Deshabilitado** – Evita que los usuarios hagan clic en el botón. Usa esto cuando una acción aún no esté disponible, como desactivar un botón "Enviar" hasta que se completen los campos obligatorios ### **Acciones del botón (Enlazar a)** El **Enlazar a** ajuste determina qué ocurre cuando los usuarios hacen clic en el botón. Elige el tipo de acción que coincida con lo que quieres lograr.
[**Mostrar notificación**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/mostrar-toast) Muestra un breve mensaje de notificación que aparece en la parte superior de la página y desaparece después de unos segundos. Cuándo usarlo: Mensajes de confirmación como "Cambios guardados" o "Solicitud enviada" que no requieren acción del usuario. Los toasts proporcionan retroalimentación sin interrumpir el flujo de trabajo del usuario. [**Navegar**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar) Redirige a los usuarios a otra página—ya sea dentro de tu Experience Site o a una URL externa. Cuándo usarlo: Botones "Más información" que van a páginas de detalle, navegación "Volver al inicio" o enlaces a recursos externos. Puedes navegar a páginas estándar, páginas de registros o URLs personalizadas. [**Abrir Modal de Alerta**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-modal-de-alerta) Abre una ventana emergente con un mensaje que los usuarios deben reconocer antes de continuar. Cuándo usarlo: Avisos importantes que los usuarios deben leer, como términos y condiciones, divulgaciones de privacidad o advertencias antes de proceder con una acción. [**Abrir Confirmación**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-confirmacion) Muestra un cuadro de diálogo de confirmación pidiendo a los usuarios que confirmen o cancelen su acción. Cuándo usarlo: Acciones con consecuencias que no se pueden deshacer, como eliminar un registro, cancelar un envío o revocar un acceso. El diálogo ofrece a los usuarios la oportunidad de reconsiderar antes de continuar. [**Abrir diálogo de flujo**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-cuadro-de-dialogo-de-flujo) Lanza un Flow de Salesforce en una ventana modal emergente. Cuándo usarlo: Procesos de varios pasos como enviar un caso de soporte, completar una encuesta, actualizar información de la cuenta o cualquier flujo guiado. Crea el flow en Flow Builder y luego conéctalo al botón: el flow se ejecuta dentro del modal sin navegar fuera de la página actual *** ## Especificaciones {% tabs %} {% tab title="Propiedades" %} | Nombre | Descripción | Uso | | ------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Etiqueta** | Define el texto que se muestra en el botón. | Introduce una etiqueta concisa y clara que indique al usuario la acción del botón. | | **Nombre del icono** | Elige un icono para mostrar en el botón. | Selecciona un icono apropiado que represente visualmente la acción del botón, mejorando la comprensión del usuario. | | **Posición del icono** | Determina la posición del icono dentro del botón. | Elige una posición que equilibre visualmente el botón y se alinee con la dirección de diseño de tu página web. | | **Variante** | Selecciona una variante de estilo predefinida para el botón. | Elige una variante que se adapte al contexto de la acción del botón y al lenguaje de diseño general de la página web. | | **Alineación Horizontal** | Define la alineación horizontal del botón dentro de su contenedor. | Alinea el botón para lograr armonía visual y cumplir con los requisitos de diseño de la página web. | | **Estirar** | Determina si el botón debe estirarse para rellenar su contenedor. | Habilita esta opción para que el botón se expanda horizontalmente, rellenando el espacio disponible dentro de su contenedor. | | **Deshabilitado** | Controla el estado activo o deshabilitado del botón. | Desactiva el botón para evitar la interacción del usuario; útil en condiciones donde cierta acción no es aplicable o debe prevenirse temporalmente. | | {% endtab %} | | | {% tab title="Apariencia" %} ### **Espaciado (Arriba, Abajo, Izquierda, Derecha)** * **Margen-superior, Margen-inferior, Margen-izquierdo, Margen-derecho:** Estos controlan el espacio alrededor del botón en cada dirección. Úsalos para posicionar con precisión tus botones, evitando la superposición con otros elementos y creando espacio de respiración. ### **Etiqueta/Icono** * **Color:** El color predeterminado del texto o del icono del botón. * **Color activo:** El color al que cambia el texto/icono cuando el botón se hace clic o se toca. * **Color al pasar el cursor:** El color al que cambia el texto/icono cuando el usuario pasa el ratón por encima del botón. * **Familia tipográfica:** Especifica la tipografía usada para la etiqueta de texto del botón. Asegúrate de que esté alineada con el diseño general de tu sitio y sea fácil de leer. * **Tamaño de fuente:** Controla el tamaño del texto de la etiqueta. Ajusta para legibilidad y énfasis según sea necesario. * **Estilo de fuente:** Establece el estilo del texto, como normal, cursiva u oblicuo. Úsalo con moderación para énfasis especial. * **Peso de fuente:** Dicta el grosor del texto. Considera usar diferentes grosores para diferenciar botones primarios y secundarios. ### **Fondo** * **Color de fondo:** El color predeterminado del fondo del botón. * **Color de fondo activo:** El color de fondo del botón cuando se hace clic o se toca. * **Color de fondo al pasar el cursor:** El color de fondo cuando el usuario pasa el ratón por encima del botón. ### **Borde** * **Color del borde:** El color del borde del botón. * **Color del borde activo:** El color del borde cuando el botón está activo. * **Color del borde al pasar el cursor:** El color del borde cuando el usuario pasa el ratón por encima del botón. * **Tamaño del borde:** El grosor del borde (en píxeles). * **Estilo de borde:** El tipo de borde: sólido, punteado, discontinuo, etc. * **Radio del borde:** Controla qué tan redondeadas son las esquinas del botón. Valores más altos producen botones más suaves y redondeados {% endtab %} {% endtabs %}