Free
Pro

Toast / Snackbar

Base UI (Angular) toasts are imperative status messages via ToastService — inject it, call success or show. The host live region is created on first use; do not put base-toast-container in templates. The service skips DOM work on the server so prerender stays clean.

When to use

  • Save, copy, undo, and promise-loading feedback that should not steal focus.
  • Global notices from services, not from a specific page layout.

When not to use

  • Errors that must be read and acted on — use an alert, dialog, or inline field error.
  • Persistent banners (cookies, outages) — use cookie-banner or a page alert.

Install with npx base-ui-cli add toast.

free

Playground

Playground

HTML

this.toast.show('File deleted', {
  color: 'success',
  position: 'top-right',
  action: { label: 'Undo', onClick: () => restore() },
});

Toast Colors


Convenience Methods

The ToastService provides shortcut methods: success(), error(), warning(), and info().


typescript

Configuration

Each toast can be configured with color, duration, icon, and position. See the API reference below.


typescript

Actions and promises

Pass action for an inline button, or use promise() for loading → success/error.


typescript

Keyboard & accessibility

Role
Informational toasts use role=status. Danger and warning use role=alert. The host is an aria-live region.
Focus
Toasts do not steal focus. Action and dismiss buttons are reachable if the toast is still visible.

Shortcuts

  • TabReach the action or dismiss button on a visible toast

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add toast

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add toast
// Paths are relative to aliases.components (default: src/app/components)
import { ToastConfig, ToastPromiseMessages, ToastService } from './toast/toast.service';

@Component({
  selector: 'app-your-component',
  template: `...`
})
export class YourComponent {
  private toast = inject(ToastService);
}

API for toast — generated from JSDoc in the library source.

API reference for toast
APIMemberTypeDescription
ToastServiceshow()(message: string, config: ToastConfig = {}) => numberShows a toast and returns its id.
ToastServicedismiss()(id: number) => voidDismisses a toast by id.
ToastServicesuccess()(message: string, config?: ToastConfig) => numberSuccess toast.
ToastServiceerror()(message: string, config?: ToastConfig) => numberError toast.
ToastServicewarning()(message: string, config?: ToastConfig) => numberWarning toast.
ToastServiceinfo()(message: string, config?: ToastConfig) => numberInfo toast.
ToastServicepromise()(promiseOrFn: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, config?: ToastConfig) => Promise<T>Loading toast that resolves to success or error when the promise settles.
ToastServiceclearAll()() => voidDismisses every visible toast.
ToastConfigcolorToastColorSemantic color of the toast. Defaults to `primary`.
ToastConfigdurationnumberAuto-dismiss delay in ms. `0` keeps the toast until dismissed. Defaults to 4000.
ToastConfigiconstring`base-icon` name. Defaults from `color` when omitted.
ToastConfigpositionToastPositionViewport corner. Defaults to `top-right`.
ToastConfigactionToastActionOptional inline button (e.g. Undo). `{ label, onClick, dismiss? }`.
ToastPromiseMessagesloadingstringShown while the promise is pending (`duration: 0`).
ToastPromiseMessagessuccessstring | ((data: T) => string)Shown on resolve.
ToastPromiseMessageserrorstring | ((err: unknown) => string)Shown on reject.