Button
Tipo: Core
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-styles Storybook com classes e exemplos
- Devs · Angularmds-angular Storybook com inputs e outputs
** Definição Funcional**
Seção intitulada “** Definição Funcional**”Botões iniciam ações instantâneas ou permitem que o usuário faça escolhas em diálogos. Eles comunicam o que acontecerá após o clique e devem ser visualmente distintos para indicar interatividade.
Diretrizes de Variações (Tabela de Referência)
Seção intitulada “Diretrizes de Variações (Tabela de Referência)”| Variante | Uso Recomendado | Regra de UX Writing |
|---|---|---|
| Control/Default | Opções ou ações neutras. | Use verbos diretos: Editar, Visualizar. |
| Primary | Ação principal da página ou formulário (máx. 1 por tela). | Foque no objetivo: Salvar, Continuar. |
| Primary Outline | Ações secundárias importantes, mas não essenciais. | Use para ações de suporte: Exportar, Imprimir. |
| Danger | Ações destrutivas ou irreversíveis. | Seja explícito: Excluir Registro, Cancelar Carga. |
| Success | Conclusão de fluxos positivos e finais. | Use para fechamento: Registrar Entrega. |
| Text/Transparent | Ações de baixa prioridade ou botões de ícone. | Rótulos curtos ou apenas ícones com tooltip. |
Diretrizes de Comportamento e Escrita
Seção intitulada “Diretrizes de Comportamento e Escrita”- Seja Breve: O rótulo deve ter preferencialmente uma ou duas palavras.
- Ruim: Clique aqui para emitir a nota.
- Melhor: Emitir Nota
- Vá Direto ao Ponto: Use verbos no infinitivo que descrevam a ação.
- Caixa de Título: Todos os botões devem seguir a regra de capitalização de título.
- Exemplo: Gerar Relatório (e não “Gerar relatório”).
- Uso de Reticências (…): Se o botão abrir uma nova janela ou exigir mais entradas antes de concluir a ação, use reticências.
- Exemplo: Configurar Filtros… ou Imprimir…
- Evite Repetição: Se o título da seção é “Motoristas”, o botão não precisa dizer “Adicionar Motorista”, apenas Adicionar.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto | Estilo UX (Correto) |
|---|---|---|
| Exclusão de Rota | Tem certeza que quer apagar? | Excluir Rota (Botão Danger) |
| Finalizar Processo | Eu quero confirmar a entrega | Confirmar Entrega (Botão Success) |
| Busca | Procure aqui o seu pedido | Pesquisar (Botão Control) |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
HTML/CSS (mds-styles)
Seção intitulada “HTML/CSS (mds-styles)”Exemplo
Seção intitulada “Exemplo”Story Primary do Storybook:
<button class="mds-btn mds-btn--primary" > <span class="mds-btn__label">Button Primary</span></button>Variações e opções
Seção intitulada “Variações e opções”Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.
| Opção | Valores | Padrão no exemplo |
|---|---|---|
variant |
control primary secondary success danger info warning link |
primary |
size |
xs sm md lg |
md |
disabled |
true · false |
— |
loading |
true · false |
— |
rounded |
true · false |
— |
outline |
true · false |
— |
block |
true · false |
— |
iconLeft |
— | — |
iconRight |
— | — |
Classes CSS
Seção intitulada “Classes CSS”Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.
| Tipo | Classes |
|---|---|
| Bloco | .mds-btn |
| Elementos | .mds-btn__icon .mds-btn__label .mds-btn__wrap |
| Modificadores | .mds-btn__icon--option .mds-btn__wrap--option .mds-btn--active .mds-btn--aqua .mds-btn--block .mds-btn--blue .mds-btn--brand .mds-btn--checked .mds-btn--control .mds-btn--danger .mds-btn--disabled .mds-btn--emphasis .mds-btn--green .mds-btn--info .mds-btn--input .mds-btn--item-option .mds-btn--lg .mds-btn--link .mds-btn--link--disabled .mds-btn--md .mds-btn--orange .mds-btn--outline .mds-btn--pink .mds-btn--primary .mds-btn--red .mds-btn--rounded .mds-btn--secondary .mds-btn--selected .mds-btn--sm .mds-btn--success .mds-btn--teal .mds-btn--toggle-content .mds-btn--transparent .mds-btn--vertical .mds-btn--warning .mds-btn--xs .mds-btn--yellow |
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-button, button[mdsButton], a[mdsButton]
Um botão aciona um evento ou ação e pode direcionar o usuário para outra página.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
variant |
MdsButtonVariants |
'default' |
Variações do botão |
size |
MdsSizes |
'md' |
Tamanhos de botão |
label |
string |
'' |
Texto do botão |
aria-label |
string |
'' |
Aria label do botão |
icon |
MdsIconAlias | undefined |
undefined |
Icone do botão |
iconRight |
MdsIconAlias | undefined |
undefined |
— |
iconSize |
MdsIconSizes |
'md' |
Tamanho do icone |
iconType |
'alias' | 'svg' |
'alias' |
Tipo do icone |
type |
'submit' | 'button' |
'button' |
Tipo do botão |
additionalClass |
string |
'' |
Classe adicional para o botão |
rounded |
boolean |
false |
— |
outline |
boolean |
false |
Botão outline |
fullWidth |
boolean |
false |
Botão com largura total |
disabled |
boolean |
false |
Desabilita o botão |
loading |
boolean |
false |
Botão com loading |
selected |
boolean |
false |
Botão selecionado |
checked |
boolean |
false |
Botão checkado em um grupo (radio) |
itemOption |
boolean |
false |
Botão de lista de opções |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onClick |
void |
Evento disparado ao clicar no botão |
Conteúdo projetado com o atributo data-position:
data-position="custom-label"