Badge
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”O Badge é um pequeno indicador visual utilizado para exibir contagens, notificações ou estados de status associados a um elemento específico da interface. Ele ajuda o usuário a identificar rapidamente itens que requerem atenção ou ação.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Simplicidade no Conteúdo: Use apenas números ou palavras curtíssimas (ex: “Novo”, “Lido”).
- Vá Direto ao Ponto: Se o número for maior que 99, use o padrão “99+” para evitar que o componente cresça demais e quebre o layout.
- Hierarquia Visual: Posicione o Badge geralmente no canto superior direito do elemento pai (como um ícone de notificações ou uma aba de “Cargas”).
- Não se Repita: Se o Badge estiver sobre um ícone de “Caminhão”, não escreva “Caminhão: 5”. Use apenas “5”. O contexto visual já explica ao que o número se refere.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Contagem | Existem 12 novos alertas | 12 |
| Status de Carga | Esta carga é muito urgente | Urgente |
| Novidades | Item adicionado recentemente | Novo |
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 Default do Storybook:
<span class="mds-badge mds-badge--brand"><span class="mds-badge__label"> Badge</span></span>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 |
brand brand-light blue blue-light teal teal-light aqua aqua-light green green-light red red-light pink pink-light orange orange-light yellow yellow-light gray gray-light primary primary-light accent accent-light info info-light warning warning-light danger danger-light success success-light |
brand |
size |
xs sm md lg |
— |
rounded |
true · false |
— |
solid |
true · false |
— |
showIcon |
true · false |
— |
showValue |
true · false |
— |
Classes CSS
Seção intitulada “Classes CSS”Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.
| Tipo | Classes |
|---|---|
| Bloco | .mds-badge |
| Elementos | .mds-badge__icon .mds-badge__label .mds-badge__value |
| Modificadores | .mds-badge--accent .mds-badge--accent-light .mds-badge--aqua .mds-badge--aqua-light .mds-badge--blue .mds-badge--blue-light .mds-badge--blue-lighter .mds-badge--brand .mds-badge--brand-light .mds-badge--clickable .mds-badge--danger .mds-badge--danger-light .mds-badge--fixed .mds-badge--gray .mds-badge--gray-light .mds-badge--green .mds-badge--green-light .mds-badge--info .mds-badge--info-light .mds-badge--info-lighter .mds-badge--inline .mds-badge--new .mds-badge--orange .mds-badge--orange-light .mds-badge--pink .mds-badge--pink-light .mds-badge--primary .mds-badge--primary-light .mds-badge--red .mds-badge--red-light .mds-badge--rounded .mds-badge--sm .mds-badge--success .mds-badge--success-light .mds-badge--teal .mds-badge--teal-light .mds-badge--transparent .mds-badge--warning .mds-badge--warning-light .mds-badge--yellow .mds-badge--yellow-light |
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-badge
Documentação e exemplos sobre os badges, nosso pequeno componente para contagem e rótulos.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
variant |
MdsBadgeVariants |
'default' |
Variantes de badge |
value |
string |
'' |
Conteúdo do badge |
size |
'sm' | 'md' |
'sm' |
Tamanhos do badge |
label |
string |
'' |
Label opcional para o badge |
solid |
boolean |
false |
Badge sólido |
rounded |
boolean |
false |
Badge arredondado |
fixed |
boolean |
false |
Fixa o badge |
icon |
MdsIconAlias | undefined |
undefined |
Alias do icone |
clickable |
boolean |
false |
Adiciona variação com clique |
className |
string |
'' |
Classe CSS customizada adicionada ao host |