Componente de Botão

O componente de Botão, dos Componentes principais, permite a configuração e a exibição de um item de botão em uma página.

Uso

O componente de Botão, dos Componentes principais, permite a inclusão de um botão em uma página.

Versão e compatibilidade

A versão atual do componente de botão é a v2, introduzida com a versão 2.18.0 dos componentes principais em fevereiro de 2022, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.

Versão do componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 - Compatível Compatível
v1 Compatível Compatível Compatível

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Exemplo de saída do componente

Para experimentar o componente de Botão, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.

Detalhes técnicos

A documentação técnica mais recente sobre o componente de Botão pode ser encontrada no GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de configuração

A caixa de diálogo de configuração permite que o autor de conteúdo defina o botão e como ele se comportará e será exibido para um visitante da página.

Guia Propriedades

Guia Propriedades da caixa de diálogo de edição do componente de Botão

  • Texto - O texto a ser exibido no botão
  • Link - Link para uma página de conteúdo no AEM, um recurso externo ou uma âncora
    • Use a Caixa de diálogo de seleção para escolher um caminho dentro do AEM.
  • Abrir link em nova guia - Se marcada, o link será aberto em uma nova guia do navegador.
  • Ícone - Identificador para exibir um ícone no botão
  • ID - Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de Dados.
    • Caso deixado em branco, um ID exclusivo é gerado automaticamente para você e pode ser encontrado ao inspecionar a página resultante.
    • Se um ID for especificado, é responsabilidade do autor garantir que ele seja exclusivo.
    • A alteração do ID pode afetar o rastreamento de CSS, JS e da Camada de Dados.

Guia Acessibilidade

Guia Acessibilidade da caixa de diálogo de edição do componente de Botão

Na guia Acessibilidade, os valores podem ser definidos para rótulos de acessibilidade ARIA para o componente.

  • Rótulo - Valor de um atributo de rótulo ARIA para o componente

Guia Estilos

Guia Estilos da caixa de diálogo de edição do componente de botão

O componente de botão é compatível com o sistema de estilos do AEM.

Use o menu suspenso para selecionar os estilos que deseja aplicar ao componente. As seleções feitas na caixa de diálogo de edição têm o mesmo efeito das selecionadas na barra de ferramentas do componente.

Os estilos devem ser configurados para esse componente na caixa de diálogo de design para que o menu suspenso fique disponível.

Caixa de diálogo de design

Guia Estilos

O componente de Botão é compatível com o Sistema de Estilos do AEM.

Camada de dados de clientes Adobe

O componente de Botão é compatível com a Camada de dados de clientes Adobe.

Nesta página