Toast

Components/Feedback and status

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Confirms outcomes and communicates transient feedback without interrupting the current flow.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the stable ds-tis/toast JavaScript runtime.

Loading functional preview…

Open the HTML/CSS/JS playground

Anatomy

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 With actions Solid

Usage

When to use

• A completed action needs brief confirmation without blocking the task.
• Feedback may disappear without removing information required to continue.

When not to use

• The message requires a decision, critical confirmation, or correction before continuing.
• Content must remain associated with a field or a specific page context.

Usage note

Use high priority for error; success, warning, and info remain polite announcements.

Implementation

Status

Stable

Distribution

npm package

Installation

npm

npm install ds-tis

pnpm

pnpm add ds-tis

yarn

yarn add ds-tis

bun

bun add ds-tis

Imports

import 'ds-tis/css'
import { showToast } from 'ds-tis/toast'

showToast({
  type: 'success',
  style: 'subtle',
  title: 'Preferências salvas',
  description: 'As alterações já estão disponíveis para esta conta.',
})

Markup

<button class="ds-button ds-button--primary ds-button--md" type="button">
  <span class="ds-button__label">Salvar preferências</span>
</button>

Web implementation contract

Required runtime

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.

The runtime emits ds-toast-show, ds-toast-dismiss, and ds-toast-action from the region, with bubbling and details for the affected Toast.

Accessibility

Accessibility

Accessibility

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.

Output responsibility

Initialize the public runtime after render and destroy it when the owning view unmounts.

Validation evidence

Covered by the stable Storybook, public runtime tests when applicable, keyboard scenarios, responsive checks, and Axe.

Open the stable reference