> 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.md). # AX - Botón ## Resumen **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 añadir 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 CTAs del portal, navegación personalizada, acciones de "Contáctanos", flujos de trabajo de creación de registros o cualquier interacción de usuario que necesite un botón claro y con tu marca. *** ## **Configurando tu botón** Después de arrastrar AX - Button a tu página en Experience Builder, configurarás dos cosas principales: cómo se ve el botón y qué sucede cuando los usuarios hacen clic en él. ### **Apariencia del botón** Estos ajustes 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 (p. ej., "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; entre las opciones comunes se 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 colocación a la izquierda funciona bien en la mayoría de los casos, mientras que la colocación a la derecha puede indicar navegación hacia adelante. **Variante** – El estilo visual del botón. Las opciones suelen incluir principal (en negrita, llamativo), secundario (discreto) 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, centro o derecha. La alineación centrada funciona bien para CTAs independientes, mientras que la alineación a la izquierda es adecuada para botones de formularios. **Expandir** – Cuando está habilitado, el botón se expande para ocupar todo el ancho de su contenedor. Úsalo para CTAs destacados o cuando quieras que el botón coincida con el ancho de los campos de formulario que tiene encima. **Deshabilitado** – Evita que los usuarios hagan clic en el botón. Úsalo cuando una acción aún no esté disponible, como deshabilitar un botón "Enviar" hasta que se completen los campos obligatorios ### **Acciones del botón (Vincular a)** La **Vincular a** la configuración determina qué sucede 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 emergente**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/show-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/interactions/navigate.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 llevan 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 URL personalizadas. [**Abrir modal de alerta**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-alert-modal.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, avisos de privacidad o advertencias antes de que continúen con una acción. [**Abrir confirmación**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-confirm.md) Muestra un cuadro de diálogo de confirmación que pide a los usuarios confirmar o cancelar su acción. Cuándo usarlo: acciones con consecuencias que no se pueden deshacer, como eliminar un registro, cancelar un envío o quitar acceso. El cuadro de diálogo les da a los usuarios la oportunidad de reconsiderar antes de continuar. [**Abrir diálogo de flujo**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-flow-dialog.md) Inicia un flujo 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 de trabajo guiado. Crea el flujo en Flow Builder y luego conéctalo al botón: el flujo se ejecuta dentro del modal sin salir de la página actual *** ## Especificaciones {% tabs %} {% tab title="Propiedades" %} | Nombre | Descripción | Uso | | ------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Etiqueta** | Define el texto mostrado 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 llenar su contenedor. | Habilita esta opción para que el botón se expanda horizontalmente, llenando el espacio disponible dentro de su contenedor. | | **Deshabilitado** | Controla el estado activo o deshabilitado del botón. | Deshabilita el botón para evitar la interacción del usuario, útil en condiciones en las que cierta acción no es aplicable o debe impedirse 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 el solapamiento con otros elementos y creando espacio de respiración. ### **Etiqueta/Icono** * **Color:** El color predeterminado del texto o icono del botón. * **Color activo:** El color al que cambia el texto/icono cuando se hace clic o se pulsa el botón. * **Color al pasar el cursor:** El color al que cambia el texto/icono cuando el usuario pasa el ratón sobre el botón. * **Familia tipográfica:** Especifica la familia tipográfica utilizada para la etiqueta de texto del botón. Asegúrate de que se alinee 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 la legibilidad y el énfasis según sea necesario. * **Estilo de fuente:** Establece el estilo del texto, como normal, cursiva u oblicuo. Úsalo con moderación para un énfasis especial. * **Peso de fuente:** Determina el grosor del texto. Considera usar diferentes pesos para diferenciar los botones principales 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 pulsa. * **Color de fondo al pasar el cursor:** El color de fondo cuando el usuario pasa el ratón sobre el 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 sobre el botón. * **Tamaño del borde:** El grosor del borde (en píxeles). * **Estilo del borde:** El tipo de borde: sólido, punteado, discontinuo, etc. * **Radio del borde:** Controla lo redondeadas que son las esquinas del botón. Valores más altos dan lugar a botones más suaves y redondeados {% endtab %} {% endtabs %} --- # 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.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.