Componentes principais

Avatares são usados para mostrar uma miniatura de uma foto do usuário ou uma representação visual de qualquer outro tipo de conteúdo.

• Imagem

  Os avatares devem mascarar uma imagem em sua forma e funcionar com qualquer tamanho de imagem, já que podem receber essa imagem de fontes de dados desconhecidas.

• Fallback de imagem

  Deve haver fallbacks quando não há imagem disponível. Isso pode ser feito com imagens de espaço reservado ou iniciais.

• Acessibilidade

  Sempre forneça uma descrição para leitores de tela descrevendo o que é exibido na imagem do avatar em vez de apenas nomear sua função.

• Tamanhos

  Existem muitos contextos para o uso de avatares e todos eles requerem tamanhos diferentes para o componente. Para projetos médios, use pelo menos 2-3 tamanhos diferentes e certifique-se de que haja pelo menos um tamanho pequeno disponível.

• Ícone

  Os avatares podem ser usados com um ícone em vez de uma imagem para enfatizar áreas que não necessariamente têm (ou precisam) de uma imagem associada.

• Cores de fundo

  Quando usados com ícones ou texto, deve haver uma cor de fundo dos tokens de cor do sistema de design aplicada à forma do avatar. Certifique-se de que ícones e texto tenham uma relação de contraste suficiente com o fundo de acordo com o padrão WCAG AA.

Crachás (em inglês: badges) são elementos que representam o status de um objeto ou valor de entrada do usuário.

• Aparência

  Os crachás podem desempenhar vários papéis em seu produto e ter uma cor predefinida para cada papel deve ajudar os usuários a entender seu significado. Ao alterar as cores, certifique-se de que o texto tenha relação de contraste suficiente com o fundo de acordo com o padrão WCAG AA.

• Ação de dispensar

  Os crachás podem ser usados como uma maneira dinâmica de exibir valores selecionados e deve haver uma maneira de dispensá-los.

Banners exibem uma mensagem acionável usada como forma proeminente de comunicação com seus usuários.

• Aparência

  Os banners são usados para exibir diferentes tipos de mensagens e é importante diferenciar sua aparência visual com base no papel que desempenham. Se estiver usando cores de fundo para diferenciação de papéis, certifique-se de que haja uma taxa de contraste suficiente com o conteúdo de acordo com o padrão WCAG AA.

• Área para ícones ou imagens

  Os banners podem complementar sua mensagem usando um ícone ou imagem de suporte. Eles não devem ser usados ​​em vez do conteúdo de texto.

• Ações

  As ações nos banners devem estar relacionadas ao seu texto e fornecer uma maneira de reagir à mensagem enviada ao usuário.

• Ação de saída

  Não sobrecarregue o usuário com banners na página e inclua uma opção de saída. Isso pode ser um botão separado de fechar ou uma das ações fornecidas.

• Acessibilidade

  Se um banner aparecer dinamicamente na página, deve ser anunciado ao usuário por sua tecnologia assistiva.

• Responsividade

  Os banners devem se adaptar ao tamanho da tela. Isso geralmente significa que eles se adaptam para ocupar largura total em dispositivos móveis para economizar espaço.

Botões são elementos interativos usados ​​para ações de um único passo.

• Estado de destaque

  Mostre claramente que o botão é interativo quando ele é destacado com um cursor de mouse.

• Estado ativo

  Usado quando um botão é pressionado. O mesmo estado pode ser usado para representar o botão responsável por alternar outro elemento na página enquanto esse elemento estiver visivelmente aberto.

• Estado de foco

  Usado quando um botão é selecionado por meio da navegação pelo teclado.

• Suporte a ícones

  Os ícones comunicam facilmente o propósito do botão quando usados ​​ao lado de seu rótulo ou podem ser usados ​​sem texto quando não há espaço suficiente. Certifique-se de que a etiqueta de acessibilidade seja fornecida quando usado com um ícone apenas.

• Desativado

  Mostra visualmente que um botão não é interativo e o impede de ser pressionado.

• Carregando

  Usado quando os usuários têm que esperar pelo resultado de sua ação depois de pressionar um botão. Se um spinner for usado para exibir esse estado, certifique-se de que ele não está alterando a largura ou altura original do botão.

• Largura total

  Por padrão, os botões têm a largura de seu conteúdo, mas eles também devem ter uma variante de largura total que funcione bem em dispositivos móveis.

• Variantes

  Ao usar vários botões, deve haver uma maneira de diferenciar entre ações primárias e secundárias. Os botões podem desempenhar funções diferentes para o usuário ou serem usados em diferentes tipos de superfícies e precisam mudar a maneira como parecem.

• Tamanhos

  Os botões podem ser usados em diferentes áreas do site e podem ter vários tamanhos predefinidos. Em dispositivos móveis, as áreas de toque devem ter no mínimo 48px para serem acessíveis de acordo com as diretrizes de acessibilidade do iOS e Android.

Os cartões (em inglês: cards) são usados para agrupar informações sobre assuntos e suas ações relacionadas.

• Suporta qualquer tipo de conteúdo

  Os cartões são um dos componentes mais usados no produto, então eles devem ser flexíveis o suficiente para suportar quaisquer outros componentes colocados neles.

• Estrutura de informações

  Não importa o quão flexíveis os cartões são, é importante que eles tenham uma estrutura específica para seus elementos para consistência do produto.

• Suporta seções de mídia

  Um dos cenários mais populares para usar cartões é misturá-los com conteúdo de mídia. As opções mais populares são ter uma área de largura total na parte superior do conteúdo ou uma área de altura total em um dos lados do cartão.

• Ações complementares

  Os cartões podem ser usados com ações geralmente colocadas na parte inferior do cartão, ou o próprio cartão pode ser tocável e representar uma ação.

• Responsividade

  Em viewports móveis, os cartões geralmente têm largura total para economizar espaço para o conteúdo.

Carrosséis empilham o mesmo tipo de itens e permitem rolar horizontalmente através deles.

• Controles de navegação

  Carrosséis devem ter controles de navegação fáceis de encontrar para rolar através do conteúdo.

• Suporta qualquer tipo de conteúdo

  Carrosséis podem ser usados em diferentes contextos e não devem ser limitados a um componente filho específico. Em alguns cenários, você pode querer que os itens dentro do mesmo carrossel sejam diferentes uns dos outros.

• Personalização da largura dos itens

  Para produtos simples, pode ser bom usar vários tamanhos pré-definidos para os itens do carrossel. Para mais flexibilidade, é bom fornecer uma maneira de definir uma largura personalizada.

• Suporte a eventos de toque

  Carrosséis devem ser roláveis em dispositivos de toque. Algumas das melhores práticas são usar rolagem nativa e garantir que você esteja suportando o mesmo comportamento para todos os dispositivos de toque, não apenas telefones móveis.

• Navegação por teclado

  Deve ser possível rolar pelo conteúdo com as setas do teclado quando focado nos controles de navegação.

• Responsividade

  É uma boa prática ocultar ou reduzir o tamanho dos controles de navegação para visualizações móveis para melhorar a visibilidade do conteúdo.

Os menus suspensos (em inglês: dropdowns) são usados para exibir uma subvisualização contextual com uma lista de ações ou conteúdo relacionado à área onde o menu suspenso está.

• Suporta qualquer tipo de conteúdo

  Os menus suspensos podem ser usados em muitos contextos, como seleção de datas, seleção de idioma ou outras características do produto.

• Menu de ações

  Um dos cenários mais usados para menus suspensos é fornecer um menu de ações para o usuário, portanto, é útil ter esse layout definido.

• Foco restrito

  Uma vez que o menu suspenso é aberto, o foco deve funcionar apenas para os elementos dentro do próprio menu. Quando ele é fechado, o foco deve ir para o botão de abrir o menu suspenso.

• Ação de fechar

  Algumas ações dentro do menu suspenso devem fechá-lo ou deve haver um botão separado de fechar. Também é uma boa prática fechar o menu suspenso quando o usuário clica fora dele.

• Navegação por teclado

  Deve ser possível navegar pelos elementos do menu suspenso com o teclado e fechá-lo com a tecla Esc.

• Posicionamento dinâmico

  O conteúdo do menu suspenso deve ser exibido com base na posição atual do botão de abrir o menu na tela e sempre visível para o usuário.

• Responsividade

  O conteúdo do menu suspenso deve ser adaptado para dispositivos móveis, pois pode ocupar muito espaço em desktops.

O componente de ícone é uma forma de alinhar a exibição de ativos estáticos de ícones no produto.

• Tamanhos

  Os ícones devem ter vários tamanhos pré-definidos para fornecer uma experiência holística em todo o produto. Combinações de tipografia podem ser usadas para esses valores de tamanho para garantir que estejam alinhados com os tamanhos de texto.

• Cores

  Os ícones devem utilizar valores da paleta de cores do sistema de design. Usar a cor do texto do elemento pai para a cor de preenchimento do ícone pode tornar isso automático.

Uma caixa de seleção (em inglês: checkbox) é um elemento de formulário usado para selecionar uma ou várias opções.

• Estado selecionado

  Usado quando a caixa de seleção está selecionada e utilizará seu valor para a submissão do formulário.

• Estado desabilitado

  Impede interações com a caixa de seleção e remove seu valor da submissão do formulário.

• Estado indeterminado

  Usado quando a caixa de seleção tem elementos selecionáveis filhos e somente alguns deles estão selecionados.

• Rótulo

  Deve haver um rótulo de texto vinculado ao campo da caixa de seleção. Clicar no rótulo também deve acionar a seleção da caixa de seleção.

• Estado de erro

  O estado de erro é usado para erros de validação de formulário quando o erro está relacionado apenas ao campo da caixa de seleção. Sempre use um texto de erro junto com a mudança da cor do campo.

• Suporte ao teclado

  As seleções da caixa de seleção devem ser acionadas com a tecla de Espaço. Usar elementos nativos para isso deve fornecer esse tipo de interação pronta para uso.

• Grupo de caixas de seleção

  As caixas de seleção podem ser agrupadas para funcionar com múltiplos valores ao mesmo tempo.

Um campo de seleção de rádio (em inglês: radio button) é um elemento de formulário usado para selecionar uma opção de uma lista.

• Estado selecionado

  Usado quando a opção de rádio é selecionada e seu valor é enviado com o envio do formulário. Uma opção de rádio não pode ser desselecionada ao clicar novamente nela.

• Estado desativado

  Impede a interação com a opção de rádio e remove seu valor do envio do formulário.

• Rótulo

  Deve haver um rótulo de texto vinculado ao campo de seleção de rádio. Clicar no rótulo também deve selecionar a opção de rádio.

• Estado de erro

  O estado de erro é usado para erros de validação de formulário quando o erro está relacionado apenas ao campo de seleção de rádio. Sempre use uma mensagem de erro de texto juntamente com a alteração da cor do campo.

• Suporte ao teclado

  A seleção de uma opção de rádio deve ser feita quando a tecla Espaço é pressionada. O uso de elementos nativos deve fornecer esse tipo de interação.

• Grupo de rádio

  As opções de rádio devem sempre ser usadas em grupo. Se uma delas for selecionada, só poderá ser desmarcada escolhendo outra opção de rádio.

Campo de texto permite que os usuários insiram e editem texto.

• Estado desativado

  Impede interações de entrada e remove seu valor do envio do formulário.

• Marcador de posição

  Quando nenhum valor é inserido, mostrar um marcador de posição com um exemplo de valor potencial. Não use marcadores de posição como rótulos para os campos.

• Rótulo

  Deve haver um rótulo de texto vinculado ao campo de texto. Clicar no rótulo deve mover o foco para o campo.

• Estado de erro

  O estado de erro é usado para erros de validação de formulário quando o erro está relacionado apenas ao campo de texto. Sempre use uma mensagem de erro de texto juntamente com a alteração da cor do campo.

• Estado focado

  O estado focado deve destacar o campo de texto quando os usuários começam a interagir com ele. Sempre há apenas um campo em foco no formulário.

• Autocompletar

  Quando aplicável, adicionar suporte para o atributo de autocompletar do HTML permitirá que os usuários insiram facilmente diferentes tipos de dados.

• Suporte a ícones

  Ícones são usados para descrever métodos de entrada, expressar o estado de um campo de texto ou fornecer funcionalidade adicional.

Os interruptores de entrada (em inglês: switches) alternam o estado de um único item. Comparados à caixa de seleção de entrada, suas alterações geralmente se aplicam sem nenhum envio adicional.

• Estado verificado

  Usado quando um interruptor de entrada é ativado. É melhor fornecer uma maneira adicional de indicar o estado verificado além de alterar sua cor quando aplicável.

• Estado desativado

  Impede a interação com um interruptor de entrada.

• Etiqueta

  Deve haver uma etiqueta de texto vinculada ao campo do interruptor. Clicar na etiqueta também deve acionar a seleção de entrada.

• Suporte de teclado

  Uma seleção de interruptor deve ser acionada quando a tecla Espaço é pressionada.

As listas definem o layout do conteúdo da página ou grupos de elementos, empilhando-os vertical ou horizontalmente.

• Suporta qualquer tipo de conteúdo

  As listas podem ser usadas em qualquer contexto, desde o layout em nível de página até a gestão de compensações entre componentes granulares. Elas devem funcionar com qualquer componente usado dentro.

• Empilhamento horizontal

  As listas podem ser usadas para elementos inline e devem gerenciar como eles são empilhados horizontalmente, incluindo o gerenciamento de compensações entre várias linhas de elementos.

• Variante dividida

  Listas com divisores são as melhores práticas aconselhadas por muitas diretrizes de plataforma (especialmente em dispositivos móveis).

• Suporta conteúdo acionável

  Às vezes, as listas são usadas para agrupar componentes acionáveis, onde toda a área do item da lista deve ser clicável.

O indicador de carregamento (em inglês: loading) mostra que uma operação está sendo realizada e quanto tempo o processo levará.

• Variantes linear e não linear

  Dependendo do contexto e do componente para o qual é usado, o indicador de carregamento pode ser representado tanto com uma variante linear quanto com uma variante não linear (por exemplo, circular).

• Tempo de espera determinado ou indeterminado

  Em alguns casos, o tempo de espera não pode ser determinado. O indicador de carregamento deve ser mostrado até que o carregamento seja concluído ou ocorra um erro. Em outros casos, é melhor indicar quanto tempo falta para que o carregamento seja concluído.

• Variante clara

  O indicador de carregamento deve respeitar o fundo do elemento pai e fornecer uma variante a ser usada em cores de fundo mais escuras.

• Movimento reduzido

  O indicador de carregamento deve estar sincronizado com as configurações de movimento do sistema e reduzir a velocidade de animação quando as configurações de movimento reduzido estiverem ativadas.

Modais são contêineres que aparecem na frente do conteúdo principal para fornecer informações críticas ou um conteúdo acionável.

• Suporta qualquer tipo de conteúdo

  Assim como qualquer outro contêiner, os modais podem ser usados em diferentes cenários e você deve ser capaz de usá-los com qualquer outro componente interno.

• Ações suplementares

  Como o conteúdo no modal pode ser acionável, é importante ter uma área para elementos de ação. Esta área geralmente fica localizada na parte inferior do contêiner modal.

• Ação de fechamento

  Os modais devem fornecer uma maneira clara de serem fechados, pois bloqueiam o conteúdo quando estão abertos. Isso pode ser um botão de fechar separado ou uma das ações suplementares.

• Estrutura de informações

  Embora os modais possam ser usados como um contêiner vazio para o conteúdo, eles precisam de uma estrutura de informações definida para fornecer uma experiência holística. Isso pode incluir a definição de como os títulos e subtítulos parecem por padrão ou onde fica a área do elemento de ação.

• Suporte à navegação por teclado

  Deve ser possível fechar um modal pressionando a tecla Esc e todos os elementos com foco dentro do contêiner do modal devem ser acessíveis por navegação por teclado.

• Captura de foco

  Uma vez que um modal é aberto, o foco deve ser movido para o primeiro elemento dentro do modal e deve ser mantido dentro do contêiner do modal. Fechar o modal deve retornar o foco para o último elemento com foco na página.

Guias (em inglês: tabs) organizam a navegação entre várias páginas ou seções de conteúdo.

• Estado ativo do botão

  Deve haver uma diferenciação clara entre os botões de guia selecionados e não selecionados.

• Suporte a ícones nos botões

  Ícones ajudam a mostrar o propósito dos botões de guia quando usados ao lado de sua etiqueta.

• Botões de guia com tamanho igual

  Guias podem ser usadas em um contêiner de tamanho relativamente pequeno, onde você precisa alternar entre um número definido de seções. Para esses cenários, é melhor suportar uma variante em que a área do botão é dividida igualmente.

• Navegação por teclado

  Todos os botões de guia devem ser focalizáveis e a navegação entre os componentes de guia deve ser acessível pelo teclado.

• Responsividade

  Se todas as guias em dispositivos móveis não couberem na janela de visualização, os usuários ainda devem ter acesso a todos os botões de guia. As formas de resolver isso podem ser tornar a área do botão rolável para dispositivos móveis ou mostrar um botão Mais contendo um menu suspenso com o restante dos botões.

Toasts fornecem mensagens curtas e significativas sobre os resultados das ações.

• Dispensado automaticamente

  Mensagens de toast não devem interromper o fluxo do usuário, bloquear a tela por muito tempo ou exigir uma ação adicional do usuário.

• Suporte a ação

  Além de exibir a mensagem, os toasts também podem fornecer uma ação relacionada à mensagem, como desfazer uma ação.

• Lida com múltiplas instâncias

  Embora não aconteça com frequência, os toasts podem ser chamados de várias fontes ao mesmo tempo e todos os toasts resultantes devem ser enfileirados. É uma boa prática não mostrar todas as mensagens ao mesmo tempo.

• Acessibilidade

  As mensagens de toast devem ser anunciadas pela tecnologia de assistência de voz e sua ação deve ser facilmente acessível pelo teclado.

• Responsividade

  Os toasts devem estar alinhados com a viewport móvel e sua ação deve ser facilmente acessível para tocar.

Tooltips são componentes exclusivos para desktop que exibem informações adicionais quando o cursor do mouse é colocado sobre ou um elemento é focado.

• Suporte para foco com teclado

  Os tooltips devem ser acessíveis quando um elemento é focado usando o teclado.

• Posicionamento dinâmico

  O conteúdo do tooltip deve ser exibido com base na posição atual do elemento de gatilho na tela e sempre visível para o usuário.

• Tempo de espera de exibição

  Ter um pequeno tempo de espera antes de acionar um tooltip ajudará a evitar a exibição ocasional de tooltips enquanto os usuários movem o cursor do mouse.

• Variante clara

  O tooltip deve respeitar o plano de fundo do elemento pai e fornecer uma variante a ser usada em cores de fundo mais escuras.

• Transição instantânea para grupos de elementos

  Se houver um grupo de elementos usando tooltips, passar o mouse sobre outro elemento enquanto um tooltip já está ativa não deve acionar a animação.