Toast

Feedback transitório no viewport, sem bloquear o fluxo. Suporta tipos semânticos, dismiss, até duas actions e fila. Transient viewport feedback without blocking the flow. Supports semantic types, dismissal, up to two actions, and a queue.

App-ready

Quando usarWhen to use

Use Toast quandoUse Toast when

Você precisa confirmar ou reportar um resultado transitório — como salvar, falhar ou desfazer — sem tirar a pessoa do contexto. You need to confirm or report a transient result—such as saving, failing, or undoing—without pulling the person out of context.

Não use Toast quandoDo not use Toast when

A mensagem deve permanecer no layout (use Alert), a decisão exige foco (use Modal) ou o conteúdo é apenas uma label de hover/focus (use Tooltip). The message must remain in the layout (use Alert), the decision requires focus (use Modal), or the content is only a hover/focus label (use Tooltip).

AnatomiaAnatomy

Alterações salvas

Seu rascunho foi atualizado.

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

DemoDemo

Runtime obrigatórioRequired runtime

Fila, live regions, auto-hide, pausa, dismiss e actions dependem de ds-tis/toast. Sem action, a duração padrão é 5 segundos. Com action, não há auto-hide por padrão; uma duração explícita nunca fica abaixo de 10 segundos. O limite é de cinco toasts visíveis e duas actions por toast. Queueing, live regions, auto-hide, pausing, dismissal, and actions depend on ds-tis/toast. Without an action, the default duration is 5 seconds. With an action, there is no auto-hide by default; an explicit duration is never shorter than 10 seconds. The limit is five visible toasts and two actions per toast.

O runtime emite ds-toast-show, ds-toast-dismiss e ds-toast-action na região, com bubbling e detalhes do Toast afetado. The runtime emits ds-toast-show, ds-toast-dismiss, and ds-toast-action from the region, with bubbling and details for the affected Toast.

<script type="module">
  import {
    initToasts,
    showToast,
    dismissToast,
    destroyToasts
  } from 'ds-tis/toast';

  initToasts();
  const id = showToast({
    type: 'success',
    style: 'subtle',
    title: 'Alterações salvas',
    description: 'Seu rascunho foi atualizado.',
    actions: [
      { label: 'Desfazer', onAction: () => {} }
    ]
  });

  // dismissToast(id);
  // destroyToasts() ao desmontar a aplicação.
</script>

AcessibilidadeAccessibility

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. Success, warning, and info are announced by a role="status" region. Error uses role="alert". The runtime does not move focus; hover and focus pause the timer; Escape dismisses the toast containing focus.