button
Button é um elemento usado para indicar uma possível ação na interface.
índice
demo interativa
Uma versão de interativa do componente desenvolvido.
button default
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
disabled | Button disabled state | false | undefined | boolean |
onClick | Called when a click is detected. | false | undefined | MouseEventHandler<HTMLButtonElement> & ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) |
variation | Define the button style variation | false | primary | primaryaccentsecondarydanger |
size | Define the button size | false | small | smallmedium |
fixed | Button style to occupy full width of the container | false | undefined | boolean |
icon | An Icon component from | false | undefined | ElementType<any> |
iconRight | An Icon component from | false | undefined | ElementType<any> |
iconLeft | An Icon component from | false | undefined | ElementType<any> |
isLoading | Loading indicator | false | undefined | boolean |
href | Use this prop to transform the button element to an anchor | false | undefined | string |
target | The target attribute specifies where to open the linked document. | false | undefined |
*valores gerados automaticamente.
button icon
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
variation | Define the button style variation | true | primary | primarysecondary |
icon | An Icon component from | true | undefined | ReactNode |
disabled | Button disabled state | false | false | boolean |
onClick | Called when a click is detected. | false | undefined | (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void |
*valores gerados automaticamente.
formatação
- Label: pequeno texto que indica a ação executada pelo botão.
- Icon: ícone que auxilia na identificação da função do botão.
Uso
Botões são usados para indicar uma possível ação na interface, como completar um formulário, deletar um item ou completar uma compra.
variações
| variação | utilização |
|---|---|
| button default | Botão padrão, deve ser usado na maioria dos casos, especialmente quando os botões aparecem em grupo. |
| button icon | Botão de menor hierarquia na tela. Utilizado individualmente (por exemplo, um botão de fechar na modal). |
estilos
| estilo | utilização |
|---|---|
| primary | Para indicar ações primárias, podendo ser aparecer mais de uma vez na mesma tela. |
| secondary | Para indicar ações secundárias, podendo ser aparecer mais de uma vez na mesma tela. |
| danger | Para indicar ações destrutivas que necessitam atenção do usuário, podendo ser aparecer mais de uma vez na mesma tela. |
| accent | Para indicar ações primárias com destaque, podendo aparecer no máximo uma vez por tela. |
ícones
Na web, deve-se utilizar a combinação texto e ícone na maior parte das vezes, ajudando assim a identificação da ação. O uso e posicionamento dos ícones é indicado na tabela a seguir:
| alinhamento | utilização |
|---|---|
| a esquerda | Maior parte de usos, para facilitar a identificação de diferentes botões. |
| a direita | Para indicar ações de navegação, com excessão do ícone de voltar que deve ficar sempre a esquerda. |
| somente ícone | Para indicar ação ou navegação em um espaço reduzido. Somente para ícones aprovados. Conferir página de ícones. |
| somente texto | Para botões com necessidade de texto maior ou que não tenham um ícone naturalmente associado. |
ícones alinhados à esquerda
ícones alinhados à direita
grupos e alinhamento
- A distância horizontal entre botões deve usar o token $spacing-inline-small e a distância vertical deve usar o token $spacing-stack-1xsmall.
- A margem mínima dos botões para outros elementos deve ser de 16px.
- O botão fica posicionado ao final do conteúdo da página.
- Botões de navegação devem ficar alinhados à direita, com excessão dos botões de voltar ou cancelar que devem ficar a esquerda.
espaçamento horizontal
espaçamento vertical
guia de conteúdo
- Utilizar verbo no infinitivo.
- Deixar claro a ação (”Como usuário, eu quero ").
- Utilizar todas letras em caixa baixa.
- Consistente com o título e a descrição da ação.
- Evitar artigos.
- Evitar uso de palavras em inglês.
- Ser direto e evitar quebra de linha.
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).