# AX - Cuadro de diálogo de botón

## Resumen

**AX - Diálogo de botón** es un componente de Experience Cloud que abre una ventana modal emergente al hacer clic en las páginas de Experience Sites, mostrando contenido sin navegar a los usuarios fuera de su página actual.

Úsalo para mostrar detalles adicionales, contenido de video, mensajes de confirmación, formularios o advertencias que aparezcan en una superposición. Coloca cualquier componente de Experience Cloud dentro del modal para crear el contenido del popup en Experience Builder.

Perfecto para detalles de "Saber más", demostraciones en video, términos y condiciones, avisos de confirmación o cualquier contenido que necesite aparecer temporalmente sobre la página actual en tu portal.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHuw6jLzTv5LMkDyS3Xla%2F2023-11-07_15-55-13%20(1).gif?alt=media&#x26;token=688f18fe-8276-4044-b8b6-fd68f4f509cb" alt=""><figcaption></figcaption></figure>

***

## Configuración del Avonni Button Dialog

### **Haciendo que tu Diálogo de Botón sea Excelente**

1. **Agrega el Componente:** Encuentra el componente Avonni Button Dialog y arrástralo a tu sitio web.
2. **Haz que se vea genial:** Puedes cambiar el texto del botón (la etiqueta), el estilo de color (la variante) y cualquier otro detalle visual que desees.
3. **Haz clic y crea:** Aparecerá un cuadro emergente (un modal) cuando hagas clic en el botón. Puedes arrastrar todo tipo de cosas interesantes dentro de este cuadro, como el Componente de Video de Avonni u otras cosas geniales.

### **Configuraciones extra**

* **Ocultar encabezado:** Esto elimina la barra de título en la parte superior del cuadro emergente.
* **Tamaño:** Elige qué tan grande o pequeño quieres que sea el cuadro emergente.
* **Mostrar pie de página:** Agrega una sección en la parte inferior del popup: ideal para botones como "Aceptar" o "Cancelar."
* **Relleno de extracción de contenido:** Esto controla el espacio entre los elementos dentro del cuadro y los bordes del mismo.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F6lPzeg4VxJc8x4Oi8oea%2F2024-03-16_12-31-56.png?alt=media&#x26;token=ece654e2-58a4-4856-9f29-cb563de6f91a" alt=""><figcaption></figcaption></figure>

***

## Ajustes

{% tabs %}
{% tab title="Configuración del botón" %}

| Nombre                    | Descripción                                                                                                                   |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Etiqueta**              | Texto mostrado en el botón.                                                                                                   |
| **Nombre del icono**      | El nombre del icono del Lightning Design System que se mostrará en el botón.                                                  |
| **Posición del icono**    | La posición del icono en relación con la etiqueta; las opciones son 'izquierda' o 'derecha'.                                  |
| **Variante**              | Define la apariencia del botón, como 'brand', 'neutral', etc., según los estilos predefinidos en el Salesforce Design System. |
| **Alineación horizontal** | Alinea el botón horizontalmente dentro de su contenedor; las opciones incluyen 'izquierda', 'centro' o 'derecha'.             |
| **Estirar**               | Determina si el botón debe expandirse para llenar el ancho de su contenedor.                                                  |
| **Deshabilitado**         | Desactiva el botón, impidiendo la interacción del usuario.                                                                    |
| {% endtab %}              |                                                                                                                               |

{% tab title="Configuración del diálogo" %}

| Nombre                    | Descripción                                                                                        |
| ------------------------- | -------------------------------------------------------------------------------------------------- |
| **Ocultar encabezado**    | Activa o desactiva la visibilidad del encabezado del diálogo.                                      |
| **Tamaño**                | Establece el tamaño del diálogo; las opciones pueden incluir '`pequeño`', '`mediano`' o '`grande`. |
| **Mostrar pie de página** | Determina si se muestra el pie de página del diálogo, que puede contener botones de acción.        |

{% endtab %}

{% tab title="🎨 Estilo" %}

| Nombre            | Descripción                                                                  |
| ----------------- | ---------------------------------------------------------------------------- |
| **Encabezado**    | Especifica el color de fondo del encabezado del diálogo.                     |
| **Contenido**     | Establece el color de fondo para el área de contenido principal del diálogo. |
| **Pie de página** | Define el color de fondo para el área del pie de página.                     |

{% endtab %}
{% endtabs %}