Toast — Base UI (Angular)

Toast / Snackbar

Base UI (Angular) toasts are imperative status messages via ToastService — inject it, call success or show. Multiple toasts stack like a deck; hover or focus expands the stack, swipe dismisses, and hover pauses the timer. prefers-reduced-motion falls back to a static list. 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.
Several notices at once that should stack instead of covering the page.

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

Color

Position

Undo action

HTML

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

Stacked toasts

Fire a few in a row. Newer toasts sit in front; older ones peek behind. Hover or Tab into the stack to expand it. Drag a toast toward the nearest edge to dismiss. Hovering pauses the auto-dismiss timer. prefers-reduced-motion: reduce renders a static list instead. 15-second walkthrough: stacked toasts in Angular 22.

TypeScript

import { Component } from '@angular/core';

// 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-toast-example',
  template: `...`
})
export class ToastExampleComponent {
  private toast = inject(ToastService);
}

Install

bash

npx base-ui-cli add toast

Toast Colors

Convenience Methods

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

typescript

this.toastService.success('Data saved successfully!');
this.toastService.error('Failed to save data!');
this.toastService.warning('Your session is about to expire.');
this.toastService.info('You have 3 new messages.');

TypeScript

import { Component } from '@angular/core';

// 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-toast-example',
  template: `...`
})
export class ToastExampleComponent {
  private toast = inject(ToastService);
}

Install

bash

npx base-ui-cli add toast

Configuration

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

typescript

this.toastService.show('Custom message!', {
  color: 'accent',
  icon: 'help-circle',
  duration: 5000,
  position: 'top-right',
});

TypeScript

import { Component } from '@angular/core';

// 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-toast-example',
  template: `...`
})
export class ToastExampleComponent {
  private toast = inject(ToastService);
}

Install

bash

npx base-ui-cli add toast

Actions and promises

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

typescript

this.toastService.show('File deleted', {
  action: { label: 'Undo', onClick: () => restore() },
});

await this.toastService.promise(save(), {
  loading: 'Saving…',
  success: 'Saved',
  error: 'Failed',
});

TypeScript

import { Component } from '@angular/core';

// 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-toast-example',
  template: `...`
})
export class ToastExampleComponent {
  private toast = inject(ToastService);
}

Install

bash

npx base-ui-cli add toast

Keyboard & accessibility

Role: Informational toasts use role=status. Danger and warning use role=alert. The host is an aria-live region. Overflow cards behind the stack are inert until the stack expands.
Focus: Toasts do not steal focus. Tabbing into a toast expands the stack. Action and dismiss buttons are reachable if the toast is still visible. Hover or focus pauses auto-dismiss.

Shortcuts

TabReach the action or dismiss button on a visible toast — focus expands the stack
SwipeDrag a toast toward the nearest edge to dismiss (disabled when reduced motion is on)

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

FAQ

Same wording as the canonical FAQ.

Yes. Toast is free: inject ToastService and call success, error, or show. Multiple toasts stack like a deck; hover or focus expands the stack; swipe dismisses; hover pauses auto-dismiss. prefers-reduced-motion falls back to a static list. Install with npx base-ui-cli add toast. Do not place base-toast-container in templates.

Base UI (Angular) at base-ui.net ships a copy-in ToastService with stacked expandable toasts, swipe-to-dismiss, and a reduced-motion static list. It is not the React Sonner package. Install with npx base-ui-cli add toast.

Yes. The docs site prerenders every catalog route to static HTML, and a blocking CI job fails the build if any route stops rendering.

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-ng-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
API	Member	Type	Description
`ToastService`	`show()`	`(message: string, config: ToastConfig = {}) => number`	Shows a toast and returns its id.
`ToastService`	`dismiss()`	`(id: number) => void`	Dismisses a toast by id.
`ToastService`	`success()`	`(message: string, config?: ToastConfig) => number`	Success toast.
`ToastService`	`error()`	`(message: string, config?: ToastConfig) => number`	Error toast.
`ToastService`	`warning()`	`(message: string, config?: ToastConfig) => number`	Warning toast.
`ToastService`	`info()`	`(message: string, config?: ToastConfig) => number`	Info toast.
`ToastService`	`promise()`	`(promiseOrFn: Promise<T> \| (() => Promise<T>), messages: ToastPromiseMessages<T>, config?: ToastConfig) => Promise<T>`	Loading toast that resolves to success or error when the promise settles.
`ToastService`	`clearAll()`	`() => void`	Dismisses every visible toast.
`ToastConfig`	`color`	`ToastColor`	Semantic color of the toast. Defaults to `primary`.
`ToastConfig`	`duration`	`number`	Auto-dismiss delay in ms. `0` keeps the toast until dismissed. Defaults to 4000.
`ToastConfig`	`icon`	`string`	`base-icon` name. Defaults from `color` when omitted.
`ToastConfig`	`position`	`ToastPosition`	Viewport corner. Defaults to `top-right`.
`ToastConfig`	`action`	`ToastAction`	Optional inline button (e.g. Undo). `{ label, onClick, dismiss? }`.
`ToastPromiseMessages`	`loading`	`string`	Shown while the promise is pending (`duration: 0`).
`ToastPromiseMessages`	`success`	`string \| ((data: T) => string)`	Shown on resolve.
`ToastPromiseMessages`	`error`	`string \| ((err: unknown) => string)`	Shown on reject.

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).

Toast / Snackbar

When to use

When not to use

Playground

HTML

Stacked toasts

TypeScript

bash

Toast Colors

Convenience Methods

typescript

TypeScript

bash

Configuration

typescript

TypeScript

bash

Actions and promises

typescript

TypeScript

bash

Keyboard & accessibility

Shortcuts

FAQ

Does Base UI have toasts?

Is there a Sonner-style toast for Angular?

Is Base UI SSR-safe?

Installation

bash

API Reference

bash

typescript (Example)