Alert
Componente standalone por composição, com live region contextual, partes públicas e fechamento controlado pela aplicação.
Design
Preview funcional
Executado pelo componente Angular nativo com Live region nativa + composição Angular.
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.
Quando escolher esta saída
Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.
Implementação
- Status
- Beta
- Distribuição
- Tarball Angular validado
Instalação
npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tispnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisyarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisbun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisEstilos do DS
@import "ds-tis/css";Importações Angular
import {
TisAlert,
TisAlertClose,
TisAlertContent,
TisAlertDescription,
TisAlertIcon,
TisAlertTitle,
} from '@tis/angular/alert'Template
<tis-alert tone="success" variant="subtle">
<span tisAlertIcon><!-- ícone decorativo --></span>
<div tisAlertContent>
<strong tisAlertTitle>Configuração salva</strong>
<span tisAlertDescription>As preferências já estão disponíveis.</span>
</div>
<button tisAlertClose aria-label="Fechar alerta" (click)="dismiss()">
<!-- ícone de fechar -->
</button>
</tis-alert>Contrato público
- Pacote
@tis/angular- Entrypoint
@tis/angular/alert- Primitive
Live region nativa + composição Angular- Status
- Beta
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 status para mensagens contextuais e alert para erros urgentes, mantenha o ícone decorativo e dê nome acessível ao button de fechar opcional.
Evidência de validação
Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.