Glass Toast · Vitreo

Preview

Glass toast

It stays until you dismiss it.

Installation

Install the package once, then import the parts you use into a standalone component.

Install

$ npm install ngx-vitreo @angular/cdk @floating-ui/dom

Import

import { GlassToastProvider, GlassToast, GlassToastTitle / GlassToastDescription, GlassToastAction, GlassToastClose, GlassToastViewport } from 'ngx-vitreo';

@Component({
  imports: [GlassToastProvider, GlassToast, GlassToastTitle / GlassToastDescription, GlassToastAction, GlassToastClose, GlassToastViewport],
  // ...
})

Usage

<glass-toast-provider>
  <glass-toast [(open)]="saved">
    <div glassToastTitle>Saved</div>
    <div glassToastDescription>Your changes are stored.</div>
    <button glassToastClose></button>
  </glass-toast>
  <glass-toast [(open)]="deleted">
    <div glassToastTitle>Message deleted</div>
    <button glassToastAction altText="Undo the delete" (click)="undo()">Undo</button>
  </glass-toast>
  <glass-toast-viewport />
</glass-toast-provider>

API reference

`GlassToastProvider`

<glass-toast-provider>

Input	Type	Default	Description
`duration`	`number`	`5000`	Milliseconds before a toast closes on its own.
`swipeDirection`	`'right' \| 'left' \| 'up' \| 'down'`	`'right'`	The way a swipe dismisses a toast; toasts also slide in from and out to this side.
`label`	`string`	`'Notification'`	Prefix screen readers announce before each toast.

`GlassToast`

<glass-toast>

Input	Type	Default	Description
`open / defaultOpen`	`boolean (model)`	`true`	Controlled with [(open)], or uncontrolled; an uncontrolled toast shows as it renders.
`duration`	`number`	provider duration	Overrides the provider's duration for this toast.
`class`	`string`	None	Applies to the outer list item, not the glass card inside it.

`GlassToastTitle / GlassToastDescription`

[glassToastTitle], [glassToastDescription]

Input	Type	Default	Description
`—`	`—`	None	The heading and the message text. Also <glass-toast-title> and <glass-toast-description>.

`GlassToastAction`

button[glassToastAction]

Input	Type	Default	Description
`altText`	`string`	None	Required. Tells screen reader users how to do the action without the button.

`GlassToastClose`

button[glassToastClose]

Input	Type	Default	Description
`aria-label`	`string`	'Dismiss' without content	Draws its own × unless given content; its text names it otherwise.

`GlassToastViewport`

<glass-toast-viewport>

Input	Type	Default	Description
`hotkey`	`string[]`	`['F8']`	Keys that move focus to the toasts.
`label`	`string`	`'Notifications ({hotkey})'`	Accessible name of the region.