Alert
Comunica informação, confirmação, atenção ou erro dentro do fluxo atual.
Design
Preview funcional
Executado com HTML e CSS estáveis do DS, sem runtime JavaScript do componente.
Anatomia
Success
Your changes have been saved.
.ds-alert) — background, border-radius, padding.2 Ícone (
.ds-alert__icon) — Lucide icon 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 Descrição (
.ds-alert__description) — o que aconteceu + o que fazer.6 Fechar (
.ds-alert__close) — button de dispensar com aria-label="Dismiss alert".
Variantes Solid
Success
Your changes have been saved successfully.
Warning
Your session will expire in 5 minutes.
Error
Unable to process your request. Please try again.
Information
A new version is available. Refresh to update.
Variantes Subtle
Success
Your profile has been updated.
Warning
Storage is almost full. Consider upgrading your plan.
Error
Payment failed. Please update your billing information.
Information
Maintenance is scheduled for this weekend.
Com button de fechar
Tip
You can customize your dashboard by dragging and dropping widgets.
Saved
All changes have been saved.
Com actions
Actions são opcionais e compõem até dois Buttons Ghost Small dentro do conteúdo do Alert.
Sessão prestes a expirar
Salve o trabalho ou renove a sessão.
Mapeamento de tokens
Tokens mostrados para a variante success. Outros tipos (warning, error, info) seguem o mesmo padrão com seus respectivos grupos de cor de feedback.
| Propriedade | Token | Variável CSS |
|---|---|---|
| bg (success solid) | component.alert.bg.success.solid | --ds-alert-bg-success-solid |
| bg (success subtle) | component.alert.bg.success.subtle | --ds-alert-bg-success-subtle |
| border (success subtle) | component.alert.border-color.success.subtle | --ds-alert-border-color-success-subtle |
| text (success solid) | component.alert.description.color.success.solid | --ds-alert-description-color-success-solid |
| text title (subtle) | component.alert.title.color.subtle | --ds-alert-title-color-subtle |
| text description (subtle) | component.alert.description.color.subtle | --ds-alert-description-color-subtle |
| root padding | component.alert.padding.default | --ds-alert-padding-default |
| root gap | component.alert.gap.default | --ds-alert-gap-default |
| root radius | component.alert.radius.default | --ds-alert-radius-default |
| root border-width | component.alert.border-width.default | --ds-alert-border-width-default |
| icon size | component.alert.icon.size.default | --ds-alert-icon-size-default |
| content gap | component.alert.content.gap.default | --ds-alert-content-gap-default |
| title typography | component.alert.title.*.default | --ds-alert-title-*-default |
| description typography | component.alert.description.*.default | --ds-alert-description-*-default |
| close icon size | component.alert.close.icon-size.default | --ds-alert-close-icon-size-default |
| close target size | component.alert.close.size.default | --ds-alert-close-size-default |
| actions layout | component.alert.actions.{gap|padding-top}.default | --ds-alert-actions-* |
| action color | component.alert.action.color.* | --ds-alert-action-color-* |
Uso
Quando usar
- A mensagem precisa permanecer visível junto do conteúdo relacionado.
- O estado comunicado exige contexto ou uma ação diretamente relacionada.
Quando não usar
- O feedback é breve e não precisa permanecer no fluxo; use Toast.
- A pessoa precisa interromper a tarefa para decidir; use Modal.
Implementação
- Status
- Estável
- Distribuição
- Pacote npm
Instalação
npm install ds-tispnpm add ds-tisyarn add ds-tisbun add ds-tisImportações
import 'ds-tis/css'Markup
<div class="ds-alert ds-alert--success ds-alert--subtle" role="status">
<span class="ds-alert__icon" aria-hidden="true"><!-- ícone --></span>
<div class="ds-alert__content">
<strong class="ds-alert__title">Configuração salva</strong>
<p class="ds-alert__description">As preferências já estão disponíveis.</p>
</div>
<button class="ds-alert__close" type="button" aria-label="Fechar alerta">
<!-- ícone de fechar -->
</button>
</div>Contrato da implementação Web
Classes CSS
| Classe | Descrição |
|---|---|
ds-alert | Container base do alert |
ds-alert--solid | Estilo com fundo solid; modifier recomendado |
ds-alert--filled | Legado/deprecated: alias compatível de ds-alert--solid |
ds-alert--subtle | Estilo sutil com fundo claro e borda ao redor (1px) |
ds-alert--success | Variante success (verde) |
ds-alert--warning | Variante warning (amarelo) |
ds-alert--error | Variante error (vermelho) |
ds-alert--info | Variante info (azul) |
ds-alert__icon | Container do ícone |
ds-alert__content | Wrapper de conteúdo para título e descricao |
ds-alert__title | Título do alert (negrito) |
ds-alert__description | Texto de descricao do alert |
ds-alert__actions | Container opcional para até dois Buttons Ghost Small |
ds-alert__close | Button de dispensar/fechar |
Acessibilidade
Interação por teclado
| Tecla | Ação |
|---|---|
Tab | Move o foco para o button de fechar |
Enter | Ativa o button de fechar |
Space | Ativa o button de fechar |
Accessibility
| Critério WCAG | Requisito | Status |
|---|---|---|
| 4.1.3 Status Messages (AA) | role="alert" para mensagens urgentes, role="status" para não urgentes | ✓ |
| 1.4.1 Use of Color (A) | Ícone + texto complementam a cor — nunca cor sozinha | ✓ |
| 2.4.11 Focus Appearance (AA) | Button de fechar tem focus ring visível | ✓ |
| 4.1.2 Name, Role, Value (A) | Button de fechar tem aria-label="Dismiss alert" | ✓ |
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.
Responsabilidade da saída
Preserve a semântica do elemento nativo, nomes acessíveis, comportamento de teclado e foco visível.
Evidência de validação
Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.