Pular para o conte√ļdo principal

Button

Vis√£o geral#

Os bot√Ķes s√£o utilizados para realizar a√ß√Ķes e para tomada de decis√Ķes. Podem ser utilizado em p√°ginas e tamb√©m dentro de outros componentes.

Componente relacionado

Tipos#

Cada tipo de bot√£o representa uma prioridade na interface e √© recomendado que sejam utilizados de acordo com a import√Ęncia das a√ß√Ķes que o usu√°rio deve realizar. Outro fator importante, √© manter a consist√™ncia dentro dos produtos para que os usu√°rios identifiquem facilmente as a√ß√Ķes.

Os cinco tipos de bot√Ķes dispostos lado a lado, sendo 1 o Primary, 2 o Secondary, 3 o Tertiary, 4 o Primary Button e 5 o Secondary Danger
  1. Primary: Os bot√Ķes prim√°rios devem ser usados para a a√ß√£o principal da p√°gina e preferencialmente apenas um bot√£o deste tipo por p√°gina, para direcionar o usu√°rio para a a√ß√£o principal de forma clara.
  2. Secondary: Devem ser utilizados para a√ß√Ķes secund√°rias na p√°gina. Os bot√Ķes secund√°rios podem ser utilizado ao lado dos bot√Ķes prim√°rios, como segunda a√ß√£o, e tamb√©m isolados na p√°gina quando n√£o forem a a√ß√£o principal e j√° houver um bot√£o prim√°rio.
  3. Tertiary: Os bot√Ķes terci√°rios chamam menos aten√ß√£o que os outros bot√Ķes e devem ser utilizados para a√ß√Ķes menos importantes. Ao inserir o bot√£o de forma isolada, utilize preferencialmente acompanhado de um √≠cone que represente a a√ß√£o, para aumentar o entendimento do usu√°rio de que h√° uma a√ß√£o a ser realizada. Tamb√©m podem ser utilizados como terceira a√ß√£o junto a um bot√£o secund√°rio e prim√°rio.
  4. Primary Danger: Utilizar quando a a√ß√£o principal trouxer grande impacto para o usu√°rio, como excluir conta ou apagar um grande volume de dados, s√£o situa√ß√Ķes dif√≠ceis de reverter e que precisam de mais aten√ß√£o ao executar. Neste bot√£o, tamb√©m √© recomendado a utiliza√ß√£o de um √≠cone de alerta junto a label, para que os usu√°rios consigam diferenciar facilmente do bot√£o prim√°rio. N√£o deve ser inserido mais de um bot√£o de perigo por p√°gina.
  5. Secondary Danger: Quando a segunda ação for de grande impacto, como cancelar um processo muito importante, deverá ser utilizado este botão. Assim como no botão primário de perigo, é recomendado o uso do ícone de alerta junto a label e somente um botão por página.

Anatomia#

O botão é composto por um background ou border que recebe uma cor de marca e uma label que descreve a ação que será realizada.

Anatomia dos cinco tipos de bot√Ķes disposto lado a lado, sendo 1 a label, 2 o background e 3 o border
  1. Label (rótulo);
  2. Background;
  3. Border.

Os componentes são formados por tokens, sendo estes propriedades de estilo que definem como será estruturado e estilizado o botão. Os tokens que podem ser alterados pelas marcas, podem ser conferidos na seção de propriedades customizáveis.

Tamanhos#

Todos os tipos de bot√Ķes podem ser utilizados em dois tamanhos diferentes: Medium e Large. O tamanho medium √© o tamanho padr√£o do bot√£o e deve ser o mais aplicado. Utilize as outras varia√ß√Ķes para criar uma hierarquia na p√°gina, alinhada aos tipos de bot√Ķes .

Tr√™s varia√ß√Ķes de tamanho para o bot√£o dispostas lado a lado, sendo 1 o tamanho small, 2 o tamanho medium e 3 o tamanho large
  1. Medium;
  2. Large.

Por padrão, a largura do botão se adequa de acordo com o tamanho do texto. Mas caso seja necessário, é possível redefinir a largura para se ajustar ao tamanho do componente no qual o botão está inserido.

Dois bot√Ķes demonstrando como a largura do bot√£o aumenta conforme o a label que √© inserida

Boas pr√°ticas#

O componente do bot√£o foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Tamb√©m foram estruturadas padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia para os usu√°rios. Por isso, √© muito importante que, ao aplicar esse componente, o propriet√°rio do conte√ļdo leve em considera√ß√£o alguns crit√©rios e pr√°ticas:

Uso#

  • Evite utilizar muitos bot√Ķes em uma √ļnica tela, pois isso aumenta a carga cognitiva do usu√°rio e vai aumentar seu tempo de decis√£o;
  • Utilize sempre a a√ß√£o principal do lado direito da p√°gina, e os demais bot√Ķes √† esquerda, respeitando a hierarquia.
Tr√™s bot√Ķes dispostos √† direita, terci√°rio, secund√°rio e prim√°rio, respectivamenteFazer

Alinhe os bot√Ķes sempre √† direita da p√°gina, sendo primeiro o bot√£o prim√°rio, depois secund√°rio e terci√°rio.

Tr√™s bot√Ķes dispostos a esquerda, prim√°rio, secund√°rio e terci√°rio, respectivamenteN√£o fazer

N√£o insira os bot√Ķes fora da hierarquia e alinhado √† esquerda da p√°gina.

Label em bot√Ķes#

  • Use labels (r√≥tulos) diretas, curtas e intuitivas, que direcionem o usu√°rio para o que ser√° realizado. Para isso, prefira utilizar verbos, por exemplo: "Salvar" e "Adicionar". Quando necess√°ria maior especifica√ß√£o, pode ser utilizado um complemento junto ao verbo, como por exemplo: "Salvar rascunho". (WCAG 2.4.6: Headings and Labels)
  • O nome acess√≠vel do bot√£o, que ser√° lido por leitores de tela, deve ser o mesmo nome definido na label do bot√£o, para garantir que os usu√°rios tenham as mesmas experi√™ncias. (WCAG 2.5.3: Label in Name)
Bot√£o secund√°rio com a label Salvar rascunho e bot√£o prim√°rio com a label PublicarFazer

Utilize labels diretas e quando necess√°rio acrescente um complemento.

Bot√£o prim√°rio com a label Publicar a p√°gina AnimaliaN√£o fazer

N√£o use uma label com muitas palavras, priorize somente o necess√°rio para o entendimento do usu√°rio.

√ćcones#

  • Adicione um √≠cone junto a label do bot√£o quando precisar descrever melhor a a√ß√£o que o usu√°rio ir√° executar. Utilize √≠cones claros que possuem rela√ß√£o direta com a label. O √≠cone √† esquerda representa uma a√ß√£o imediata; e √† direita, representa continuidade.
  • Para os bot√Ķes de perigo e bot√Ķes terci√°rios, √© recomendado preferencialmente a utiliza√ß√£o do √≠cone acompanhando a label.
  • Para a utiliza√ß√£o de √≠cones isolados, use o bot√£o terci√°rio sem label, para que a acessibilidade do componente seja garantida.
Botão de perigo secundário com ícone de lixeira a esquerda da label e um botão primário com ícone de seta a direita da labelFazer

Utilize ícones que possuem associação clara com a label.

Botão primário com ícone de lixeira embaixo da labelNão fazer

Não alinhe o ícone em cima ou embaixo da label.

Cores#

  • N√£o use cores para label e background com baixo contraste entre si, pois isso dificulta o entendimento do conte√ļdo do bot√£o. √Č poss√≠vel conferir se o contraste est√° adequado e atingindo o valor de 7:1 em um Contrast Checker. (WCAG 1.4.6: Contrast)
Bot√£o prim√°rio e secund√°rio com cores com contraste de 8.01:1Fazer

Contraste alto entre o background e a label. Confira também o contraste com o fundo.

Bot√£o prim√°rio e secund√°rio com cores com contraste de 1.93:1N√£o fazer

Contraste inferior a 7:1 entre o background e a label

Interação#

  • A intera√ß√£o de foco deve compor os bot√Ķes, sendo navega√ß√£o por mouse ou teclado, e em sequ√™ncia l√≥gica. Consultar lista de exemplos em (W3C WAI-ARIA 3.5 Button).

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas pelo propriet√°rio do conte√ļdo. S√£o elas: