# 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**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/mostrar-toast.md) 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**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar.md) 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**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-modal-de-alerta.md) 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**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-confirmacion.md) 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**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/abrir-dialogo-de-flujo.md) 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 %} --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-boton.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.