Toast

Componentes/Feedback e status

ImplementaçãoHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Serviço Angular standalone com regiões live nativas, fila limitada, timeout pausável e actions persistentes.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pelo componente Angular nativo com Angular service + HTML live regions.

Carregando preview funcional…

Abrir playground Angular

Anatomia

Alterações salvas

Seu rascunho foi atualizado.

Desfazer Ver

1 Icon · 2 Content · 3 Title · 4 Description · 5 Actions (Button ghost/sm) · 6 Close

Demo

Success Warning Error Info Com actions Solid

Uso

Quando usar

• Uma ação concluída precisa de confirmação breve sem bloquear a tarefa.
• O feedback pode desaparecer sem remover informação necessária para continuar.

Quando não usar

• A mensagem exige decisão, confirmação crítica ou correção antes de continuar.
• O conteúdo precisa permanecer associado a um campo ou contexto específico da página.

Nota de uso

Use error com prioridade alta; success, warning e info permanecem anúncios educados.

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

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import {
  TisToastRegion,
  TisToastService,
} from '@tis/angular/toast'

Template

<button type="button" (click)="toast.show({
  title: 'Preferências salvas',
  description: 'As alterações já estão disponíveis para esta conta.',
  type: 'success',
  actionLabel: 'Desfazer',
  duration: 0
})">
  Mostrar Toast
</button>
<tis-toast-region />

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/toast

Primitive

Angular service + HTML live regions

Status

Beta

Acessibilidade

Acessibilidade

Acessibilidade

Success, warning e info são anunciados por uma região role="status". Error usa role="alert". O runtime não move foco; hover e foco pausam o timer; Escape dispensa o toast que contém o foco.

Responsabilidade da saída

Preserve a semântica nativa do button, submit, nomes acessíveis, estado disabled e foco visível.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável