Alert
Recipe React distribuída como source, composta com elementos nativos e as classes/tokens públicos do Alert TIS.
Design
Preview funcional
Executado pela recipe React distribuída via shadcn e baseada em Base UI.
Abrir playground React · shadcn/Base UI
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.
Composição React
import {
Alert,
AlertContent,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert"
<Alert tone="success" variant="subtle" role="status">
<AlertContent>
<AlertTitle>Configuração salva</AlertTitle>
<AlertDescription>As preferências já estão disponíveis.</AlertDescription>
</AlertContent>
</Alert>Implementação
- Status
- Beta
- Distribuição
- Source via shadcn
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/alertpnpm dlx shadcn@latest add @tis/alertyarn dlx shadcn@latest add @tis/alertbunx --bun shadcn@latest add @tis/alertContrato público
- Item do registry
@tis/alert- Provider
- Composição React
- Distribuição
- Source copiado para a aplicação
- 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 o papel de live region conforme a urgência da mensagem, 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.