Needless UI

Components

Toast

Short messages that stack, swipe away and never steal focus.

Import

import-toast.ts
import { NuiToaster, NuiToasterRegion } from '@needless-ui/angular/toast';

NuiToaster

The service that shows toasts. Inject it anywhere.

Selector
inject(NuiToaster)
NameTypeDefaultDescription
toastsMethodSignal<readonly NuiToast[]>Every toast on screen, newest first.
showMethod(options: NuiToastOptions | string) => NuiToastRefShows a toast. Pass a title, or options with a description, tone, duration, action or id.
successMethod(title, options?) => NuiToastRefShows a success toast.
warningMethod(title, options?) => NuiToastRefShows a warning toast.
dangerMethod(title, options?) => NuiToastRefShows a danger toast. It stays 8 seconds and is announced assertively.
promiseMethod(promise, messages) => PromiseShows a loading toast until the promise settles, then its success or danger message.
dismissMethod(id?: string) => voidDismisses one toast, or all of them.

NuiToasterRegion

The region where toasts appear. Place it once, in the app shell.

Selector
nui-toaster
NameTypeDefaultDescription
positionInput'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''bottom-end'Corner or edge of the viewport. Start and end follow the text direction.
expandedInputbooleanfalseKeeps the stack fanned out.
labelInputstring'Notifications (Alt+T)'Accessible name of the region. Say how to reach it.
closeLabelInputstring'Dismiss'Accessible name of the close buttons.
hotkeyInputstring'KeyT'The key, as a KeyboardEvent.code, that moves focus to the newest toast with Alt.