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.

• As propriedades do botão podem ser selecionadas na caixa de diálogo de configuração.
• Os estilos do componente de Botão podem ser definidos na caixa de diálogo de design.

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.

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

• 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

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

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.