Alert
Alerts exibem mensagens contextuais importantes para os usuários. Disponíveis em estilos filled e subtle com ícones e buttons de fechar opcionais. Persistentes até serem dispensados.Alerts display important contextual messages to users. Available in filled and subtle styles with optional icons and close buttons. Persistent until dismissed.
Quando usarWhen to use
Use alerts quandoUse alerts when
Exibir uma mensagem contextual: resumo de validação de formulário, status do sistema, confirmação de ação ou aviso. Alerts são persistentes até o usuário dispensá-los.Displaying a contextual message: form validation summary, system status, action confirmation, or warning. Alerts are persistent until the user dismisses them.
Não use alerts quandoDon't use alerts when
O feedback e transitorio (use Toast — futuro), se refere a um erro de campo único (use Form Field), ou fornece feedback inline (use texto auxiliar).The feedback is transient (use Toast — future), relates to a single field error (use Form Field), or provides inline feedback (use helper text).
| TipoType | Use paraUse for | ÍconeIcon |
|---|---|---|
| Success | Ação concluída: salvo, publicadoCompleted action: saved, published | check_circle |
| Warning | Não bloqueante: sessão expirando, depreciaçãoNon-blocking: session expiring, deprecation | warning |
| Error | Ações falharam: pagamento falhou, acesso negadoFailed actions: payment failed, access denied | error |
| Info | Neutro: nova funcionalidade, manutencaoNeutral: new feature, maintenance | info |
AnatomiaAnatomy
check_circle
1
2
3
4
5
6
Success
Your changes have been saved.
1 Container (
2 Ícone (
3 Conteúdo (
4 Título (
5 Descricao (
6 Fechar (
2 Icon (
3 Content (
4 Title (
5 Description (
6 Close (
.ds-alert) — background, border-radius, padding.2 Ícone (
.ds-alert__icon) — Material Symbol específico do tipo, reforça o significado além da cor.3 Conteúdo (
.ds-alert__content) — wrapper para título e descricao.4 Título (
.ds-alert__title) — negrito, 1-3 palavras.5 Descricao (
.ds-alert__description) — o que aconteceu + o que fazer.6 Fechar (
.ds-alert__close) — button de dispensar com aria-label="Dismiss alert".1 Container (.ds-alert) — background, border-radius, padding.2 Icon (
.ds-alert__icon) — type-specific Material Symbol, reinforces meaning beyond color.3 Content (
.ds-alert__content) — wrapper for title and description.4 Title (
.ds-alert__title) — bold, 1-3 words.5 Description (
.ds-alert__description) — what happened + what to do.6 Close (
.ds-alert__close) — dismiss button with aria-label="Dismiss alert".
Variantes FilledFilled Variants
check_circle
Success
Your changes have been saved successfully.
warning
Warning
Your session will expire in 5 minutes.
error
Error
Unable to process your request. Please try again.
info
Information
A new version is available. Refresh to update.
<div class="ds-alert ds-alert--success ds-alert--filled" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">check_circle</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Success</p>
<p class="ds-alert__description">Your changes have been saved successfully.</p>
</div>
</div>
<div class="ds-alert ds-alert--warning ds-alert--filled" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">warning</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Warning</p>
<p class="ds-alert__description">Your session will expire in 5 minutes.</p>
</div>
</div>
<div class="ds-alert ds-alert--error ds-alert--filled" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">error</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Error</p>
<p class="ds-alert__description">Unable to process your request.</p>
</div>
</div>
<div class="ds-alert ds-alert--info ds-alert--filled" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">info</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Information</p>
<p class="ds-alert__description">A new version is available.</p>
</div>
</div>Variantes SubtleSubtle Variants
check_circle
Success
Your profile has been updated.
warning
Warning
Storage is almost full. Consider upgrading your plan.
error
Error
Payment failed. Please update your billing information.
info
Information
Maintenance is scheduled for this weekend.
<div class="ds-alert ds-alert--success ds-alert--subtle" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">check_circle</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Success</p>
<p class="ds-alert__description">Your profile has been updated.</p>
</div>
</div>
<!-- Subtle style uses a border-left accent -->
<div class="ds-alert ds-alert--error ds-alert--subtle" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">error</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Error</p>
<p class="ds-alert__description">Payment failed.</p>
</div>
</div>Com button de fecharWith Close Button
info
Tip
You can customize your dashboard by dragging and dropping widgets.
check_circle
Saved
All changes have been saved.
<div class="ds-alert ds-alert--info ds-alert--filled" role="alert">
<span class="ds-alert__icon">
<span class="material-symbols-outlined">info</span>
</span>
<div class="ds-alert__content">
<p class="ds-alert__title">Tip</p>
<p class="ds-alert__description">You can customize your dashboard.</p>
</div>
<button class="ds-alert__close" aria-label="Dismiss alert">
<span class="material-symbols-outlined">close</span>
</button>
</div>Boas práticasBest practices
check_circle
Saved
Changes saved successfully.
Faça
Sempre inclua um ícone — ele reforça o tipo além da cor (WCAG 1.4.1).Always include an icon — it reinforces the type beyond color (WCAG 1.4.1).
Saved
Changes saved successfully.
Não faça
Depender apenas da cor para transmitir o tipo do alert.Rely on color alone to convey the alert type.
error
Error
Payment failed.
info
Tip
Try a different card.
Faça
Use filled para mensagens de alta prioridade, subtle para informativas.Use filled for high-priority messages, subtle for informational ones.
error
Error
Payment failed.
warning
Warning
Card expiring soon.
info
Note
Try a different card.
Não faça
Múltiplos alerts filled diluem a urgencia e sobrecarregam o usuário.Multiple filled alerts dilute urgency and overwhelm the user.
Diretrizes de conteúdoContent guidelines
| RegraRule | ExemploExample |
|---|---|
| Título: 1-3 palavras, sentence caseTitle: 1-3 words, sentence case | "Payment failed", "Changes saved" |
| Descricao: o que aconteceu + o que fazerDescription: what happened + what to do | "Your session expired. Please log in again." |
Button de fechar deve ter aria-labelClose button must have aria-label | aria-label="Dismiss alert" |
Mapeamento de tokensToken mapping
Tokens mostrados para a variante success. Outros tipos (warning, error, info) seguem o mesmo padrão com seus respectivos grupos de cor de feedback.Tokens shown for the success variant. Other types (warning, error, info) follow the same pattern with their respective feedback color groups.
| PropriedadeProperty | Token (semantic) | Variavel CSSCSS variable |
|---|---|---|
| bg (success filled) | semantic.feedback.success.bg-default | --ds-feedback-success-background-default |
| bg (success subtle) | semantic.feedback.success.bg-subtle | --ds-feedback-success-background-subtle |
| border (success subtle) | semantic.feedback.success.border-default | --ds-feedback-success-border-default |
| text (success filled) | semantic.feedback.success.content-contrast | --ds-feedback-success-content-contrast |
| text title (subtle) | semantic.content.default | --ds-content-default |
| text description (subtle) | semantic.content.secondary | --ds-content-secondary |
| border-radius | semantic.radius.component | --ds-radius-md |
| padding (all sides) | foundation.spacing.48 | --ds-dimension-12 |
| gap | foundation.spacing.32 | --ds-dimension-8 |
| title font-size | foundation.typography.font.size.12 | --ds-font-size-12 |
| title font-weight | foundation.typography.font.weight.bold | --ds-font-weight-bold |
Classes CSSCSS classes
| ClasseClass | DescricaoDescription |
|---|---|
ds-alert | Container base do alertBase alert container |
ds-alert--filled | Estilo com fundo preenchido (solid)Filled/solid background style |
ds-alert--subtle | Estilo sutil com fundo claro e borda ao redor (1px)Subtle style with light background and full border (1px) |
ds-alert--success | Variante success (verde)Success variant (green) |
ds-alert--warning | Variante warning (amarelo)Warning variant (yellow) |
ds-alert--error | Variante error (vermelho)Error variant (red) |
ds-alert--info | Variante info (azul)Info variant (blue) |
ds-alert__icon | Container do íconeIcon container |
ds-alert__content | Wrapper de conteúdo para título e descricaoContent wrapper for title and description |
ds-alert__title | Título do alert (negrito)Alert title (bold) |
ds-alert__description | Texto de descricao do alertAlert description text |
ds-alert__close | Button de dispensar/fecharDismiss/close button |
Interação por tecladoKeyboard interaction
| TeclaKey | AçãoAction |
|---|---|
Tab | Move o foco para o button de fecharMoves focus to the close button |
Enter | Ativa o button de fecharActivates the close button |
Space | Ativa o button de fecharActivates the close button |
AccessibilityAccessibility
| Criterio WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 4.1.3 Status Messages (AA) | role="alert" para mensagens urgentes, role="status" para não urgentesrole="alert" for urgent messages, role="status" for non-urgent | ✓ |
| 1.4.1 Use of Color (A) | Ícone + texto complementam a cor — nunca cor sozinhaIcon + text supplement color — never color alone | ✓ |
| 2.4.11 Focus Appearance (AA) | Button de fechar tem focus ring visívelClose button has visible focus ring | ✓ |
| 4.1.2 Name, Role, Value (A) | Button de fechar tem aria-label="Dismiss alert"Close button has aria-label="Dismiss alert" | ✓ |
Resumo de atributos ARIAARIA attributes summary
role="alert" — para mensagens urgentes/erros que devem ser anunciadas imediatamente por leitores de tela.role="status" — para mensagens informativas não urgentes (anuncio educado).aria-label="Dismiss alert" — obrigatorio no button de fechar.role="alert" — for urgent/error messages that should be announced immediately by screen readers.role="status" — for non-urgent informational messages (polite announcement).aria-label="Dismiss alert" — required on the close button.