Componente Botón button-component

El componente principal Botón permite configurar y mostrar un elemento de botón en una página.

Uso usage

El componente principal Botón permite incluir un botón en una página.

Versión y compatibilidad version-and-compatibility

La versión actual del componente Botón es la versión 2, que se introdujo con la versión 2.18.0 de los componentes principales en febrero de 2022 y se describe en este documento.

La siguiente tabla detalla todas las versiones compatibles del componente, las versiones de AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.

Versión del componente
AEM 6.4
AEM 6.5
AEM as a Cloud Service
Versión 2
-
Compatible
Compatible
Versión 1
Compatible
Compatible
Compatible

Para obtener más información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.

Salida del componente de ejemplo sample-component-output

Para experimentar el componente Botón, así como ver ejemplos de sus opciones de configuración, además de la salida HTML y JSON, visite la Biblioteca de componentes.

Detalles técnicos technical-details

La documentación técnica más reciente sobre el componente Botón se encuentra en GitHub.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

Cuadro de diálogo de configuración configure-dialog

El cuadro de diálogo de configuración permite al autor del contenido definir el botón y cómo se comportará y aparecerá para un visitante de la página.

Pestaña Propiedades properties-tab

Pestaña Propiedades del cuadro de diálogo de edición del componente Botón

  • Texto: Texto que se muestra en el botón

  • Vínculo: vínculo a una página de contenido dentro de AEM, un recurso externo o un anclaje

    • Utilice el Cuadro de diálogo de selección para elegir una ruta dentro de AEM.
  • Abrir en ficha nueva: si se selecciona, el vínculo se abre en una nueva pestaña del explorador.

  • Icono: Identificador de iconos para mostrar un icono en el botón

  • ID: esta opción permite controlar el identificador único del componente del HTML y de la capa de datos.

    • Si se deja en blanco, se generará automáticamente un ID único que se puede encontrar inspeccionando la página resultante.
    • Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
    • Cambiar el ID puede afectar al seguimiento de CSS, JS y de la capa de datos.

Pestaña Accesibilidad accessibility-tab

Pestaña Accesibilidad del cuadro de diálogo de edición del componente Botón

En la pestaña Accesibilidad, se pueden configurar valores para las etiquetas de accesibilidad ARIA del componente.

  • Etiqueta: valor de un atributo de etiqueta ARIA para el componente

Pestaña Estilos styles-tab-edit

Pestaña Estilos del cuadro de diálogo de edición del componente Botón

El componente Botón es compatible con el sistema de estilos de AEM.

Utilice la lista desplegable para seleccionar los estilos que desea aplicar al componente. Las selecciones realizadas en el cuadro de diálogo de edición tienen el mismo efecto que las seleccionadas en la barra de herramientas de componentes.

Los estilos deben configurarse para este componente en el cuadro de diálogo de diseño para que el menú desplegable esté disponible.

Cuadro de diálogo de diseño design-dialog

Pestaña Estilos styles-tab

El componente Botón es compatible con el sistema de estilos de AEM.

Capa de datos del cliente de Adobe data-layer

El componente Botón es compatible con la capa de datos del cliente de Adobe.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c