Intro
O Button é um componente interativo utilizado para disparar ações explícitas dentro da interface. Ele representa um ponto de decisão do usuário e deve comunicar claramente prioridade, intenção e impacto da ação.
Anatomia visual
As principais características de anatomia do componente são:
- Titulo da seção do accordion por recomendação sempre deve estar presente no uso do componente;
- Área de ações do accordion tem como objetivo centralizar as ações que possa conter no mesmo a principal ação que deve esta sempre presente em um accordion é a ação de collapsed onde o usuário pode interagir (recolher, exibir) o conteúdo do mesmo além de possuir outras ações:
- Conjunto de ações presentes na estrutura, ela por padrão é opcional mas caso seja necessário pode ser acrescentado conforme o modelo, seguindo os posicionamento de ações;
- Área de conteúdo do accordion, essa área funciona como um slot que o produto ou serviço que estiver implementando possa usar para customizar o conjunto de informações que será disponibilizado dentro do mesmo a alguns elementos secundários que o próprio accordion disponibiliza para padronizações dele:
- SubAccordion pode estar presentes em alguns cenários e a visão pode ser útil a quem esta realizando a implementação;
- Slot são espaços reservado para composição de conteúdos diversos dentro do accordion, pode ser substituídos por outros componentes como (Textfield, Label Content, Avatar, Table, etc…);
- Feedbacks para FAQs esse é um recurso presente dentro dos accordions por padrão mas é opcional pode aparecer em contextos de FAQs para relevância da informação que esta sendo apresentadas ao usuário;
Aplicação de tokens no componente Button:
Aplicação de tokens semânticos nos tipos possíveis do componente Button:
O que fazer e o que não fazer
As principais recomendações do que fazer e o que não fazer ao utilizar o componente Button, veja abaixo alguns cenários que pode aparecer:
✅ Faça
- Use verbos no imperativo (“Acessar serviço”, “Enviar”, “Salvar”)
- Garanta espaçamento interno consistente
- Use ícones apenas quando agregam significado
- Mantenha consistência de tipo dentro do fluxo
- Utilize variação Negative apenas para ações destrutivas reais
❌ Não faça
- Não use cores fora da semântica definida
- Não utilize texto longo
- Não centralize múltiplas ações conflitantes
- Não substitua link por button quando a ação for navegação simples
- Não use botão como container genérico
Ação principal
Inclua apenas um botão principal ou uma frase de chamariz (CTA) em uma página ou área da interface do usuário.
Os botões principais indicam a ação mais importante em um grupo ou área. Ter vários CTAs primários em uma área pode ser confuso ou visualmente opressor porque eles competem por atenção.
Rótulos
Os rótulos são uma parte bem importante para as ações que você quer que o usuário faça sem que ele se confunda para tomada de decisão.
Hierarquia de Tipos
O Button possui variações semânticas:
- Primary
- Ação principal da tela
- Deve existir apenas uma por contexto
- Secondary
- Ação alternativa relevante
- Tertiary
- Ação de menor peso visual
- Neutral
- Ações administrativas ou auxiliares
- Positive
- Confirmações ou sucesso
- Negative
- Exclusões, ações destrutivas
Responsividade
Desktop:
- Padding horizontal maior
- Altura padrão consistente
Mobile:
- Pode ocupar 100% da largura
- Área de toque mínima: 44px
Comportamento
- Não deve disparar múltiplos cliques em estado loading
- Deve possuir feedback imediato
- Não deve conter múltiplas ações internas
O Button é o principal vetor de ação da interface. Sua implementação deve respeitar:
- Hierarquia semântica
- Consistência visual
- Tokens oficiais
- Acessibilidade
- Responsividade
Ele impacta diretamente a clareza de decisão e a fluidez do fluxo do usuário. Seu uso inadequado compromete hierarquia, previsibilidade e consistência sistêmica.