Toast

Components/Feedback and status

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

A React source recipe with a Base UI manager and the public TIS Toast classes and tokens.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the React source recipe distributed through shadcn and based on Base UI.

Loading functional preview…

Open the React · shadcn/Base UI 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.

React composition

import {
  ToastProvider,
  showToast,
} from "@/components/ui/toast"

function App() {
  return (
    <ToastProvider>
      <button onClick={() => showToast({
        type: "success",
        title: "Preferências salvas",
        description: "As alterações já estão disponíveis.",
      })}>
        Salvar preferências
      </button>
    </ToastProvider>
  )
}

Implementation

Status

Beta

Distribution

Source via shadcn

Installation

Configure the namespace once in the React integration guide.

npm

npx shadcn@latest add @tis/toast

pnpm

pnpm dlx shadcn@latest add @tis/toast

yarn

yarn dlx shadcn@latest add @tis/toast

bun

bunx --bun shadcn@latest add @tis/toast

Public contract

Registry item

@tis/toast

Provider

Base UI

Distribution

Source copied into the application

Status

Beta

Technical architecture

Open registry JSON

Inspect distributed source

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 Base UI semantics and test real content, focus visibility, and accessible names in the consuming application.

Validation evidence

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

Open the stable reference