Alert

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

O Alert* *destaca informações essenciais ou mudanças de estado no sistema. É utilizado para atrair a atenção para eventos que impactam o fluxo de trabalho, garantindo que mensagens críticas não passem despercebidas.

Diretrizes de Comportamento

Clareza e Brevidade: O texto deve ser curto. Se a mensagem for de erro, descreva o problema e, se possível, a solução.
Exemplo: Endereço não encontrado. Verifique o CEP.
Tom de Voz: Mantenha a neutralidade. Evite “Você” ou “Eu”.
- Ruim: Você não selecionou uma transportadora.
- Melhor: Selecione uma transportadora para prosseguir.
Uso de Reticências: Se o alerta levar o usuário a uma nova tela de configuração para resolver o problema, o botão de ação deve usar reticências.
- Exemplo: Configurar Impressora…
Hierarquia Visual: Use títulos em negrito dentro do alerta para destacar o tipo de mensagem (Erro, Aviso ou Sucesso) quando houver um texto descritivo longo abaixo.

Definição semântica

Vermelho (Erro): Bloqueia a operação (ex: Falha na emissão de nota).
Amarelo (Aviso): Requer cautela (ex: Veículo com manutenção atrasada).
Verde (Sucesso): Confirma conclusão (ex: Rota otimizada).

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)

Exemplo

Story Neutral do Storybook:

<div class="mds-alert mds-alert--neutral">
  <p>
    Mussum Ipsum, cacilds vidis litro abertis.
  </p>
</div>

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`	`neutral` `info` `warning` `danger` `success`	`neutral`
`size`	`xs` `sm` `md` `lg`	`md`
`solid`	`true` · `false`	`false`
`hasLink`	`true` · `false`	`false`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-alert`
Elementos	`.mds-alert__link`
Modificadores	`.mds-alert--accent` `.mds-alert--danger` `.mds-alert--info` `.mds-alert--lg` `.mds-alert--md` `.mds-alert--sm` `.mds-alert--success` `.mds-alert--warning` `.mds-alert--xs`

Angular (mds-angular)

Seletor

mds-alert

Apresente mensagens contextuais para ações típicas dos usuários, usando este punhado flexível de mensagens de alerta.

Inputs

Input	Tipo	Padrão	Descrição
`variant`	`MdsAlertVariants`	`'default'`	Variações de alerta
`size`	`MdsSizes`	`'md'`	Tamanhos de alerta
`solid`	`boolean`	`false`	Fundo sólido
`animated`	`boolean`	`false`	Animação ao aparecer
`visible` ⇄	`boolean`	`true`	Visibilidade do alerta (bidirecional)
`dismissible`	`boolean`	`false`	Exibe opção de fechar o alerta
`fixed`	`boolean`	`false`	Ajustes para posicionamento fixo na tela
`noMargin`	`boolean`	`false`	Remove a margem padrão do bloco de alerta
`additionalClass`	`string`	`''`	Classe adicional para a estrutura do alerta
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`icon`	`MdsIconAlias \| null`	`null`	Icone de apoio ao alerta
`iconSize`	`MdsSizes \| null`	`'md'`	Tamanho do icone

⇄ = binding bidirecional ([(input)]).

Outputs

Output	Payload	Descrição
`onClose`	`void`	Evento disparado ao fechar o alerta

Visão ao vivo

Alert — Figma (Design System 2.0) ↗