Toast

Components/Feedback and status

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

A standalone Angular service with native live regions, a bounded queue, pausable timeout, and persistent actions.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and Angular service + HTML live regions.

Loading functional preview…

Open the Angular 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.

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

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

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

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 />

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/toast

Primitive

Angular service + HTML live regions

Status

Beta

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

Preserve native button semantics, submit behavior, accessible names, disabled state, and visible focus.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference