Better Toaster

Renders all toast notifications. Place it anywhere in your app, preferably near the root for consistent behavior.

Customization

Customize the toaster's appearance and behavior via component options. See the homepage for examples of the scenarios below.

Position

Defines the position where all toast notifications appear. Library defaults to bottom-right.

<!-- Render toasts at the bottom right corner of the viewport -->
<!-- Available positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->
<better-toaster position="bottom-right" />

Duration

Controls how long toast notifications remain visible. Library defaults to 4 seconds.

<!-- Duration must be specified in milliseconds -->
<!-- To keep toasts visible until manually dismissed use "Infinity" literal -->
<better-toaster [duration]="4000" />

Offsets

You can customize the offset values using the offset and mobileOffset inputs.
The default desktop offset is 24px, while the default mobile offset is 16px.
The mobileOffset value is applied when the screen width is below 640px.

<!-- All sides will have 32px offset -->
<better-toaster  offset="32px" />

<!-- All sides will have 10vh offset -->
<better-toaster  offset="10vh" />

<!-- 24px from the bottom, 16px from the right and left -->
<better-toaster  [offset]="{ bottom: '24px', right: '16px', left: '16px' }" />

<!-- All sides will have 32px offset in mobile devices -->
<better-toaster 
  [mobileOffset]="{ top: '32px', right: '32px', bottom: '32px', left: '32px' }"
/>

Theme

You can make the toaster's theme adapt to your app's theme by passing a theme input. Library defaults to system.

<!-- Available themes: light, dark, system -->
<better-toaster theme="light" />

Rich Colors

When set to true, success, error, info, and warning variants adopt semantic background and border colors. Library defaults to false.

<better-toaster [richColors]="true" />

Close Button

When set to false, the close button is hidden on each toast. Library defaults to true.

<better-toaster [closeButton]="false" />

Icons

You can override the default icons for each variant by passing an object with the variant names as keys. The recommended way to override the icons is to create a standalone component class for the variant you want to override. You can also pass null to hide the icon for a variant.

<!-- app-custom-success-icon.component.ts -->
<!-- Use fill/stroke utilities (including dark: variants) on the SVG so the icon matches light and dark themes. -->
<!-- recommended stroke-width is "1.75" -->
@Component({
  selector: 'app-custom-success-icon',
  standalone: true,
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
      stroke-width="1.75"  
      class="fill-black! dark:fill-none! stroke-black! dark:stroke-white! size-4!"
    >
      <!-- Your SVG code here -->
    </svg>
  `,
})
export class CustomSuccessIconComponent {}

<!-- app.html -->
<better-toaster 
  [icons]="{
    default: CustomDefaultIconComponent,
    description: CustomDescriptionIconComponent,
    success: CustomSuccessIconComponent,
    error: null,
    info: CustomInfoIconComponent,
    warning: null,
    loading: CustomLoadingIconComponent,
  }"
/>

Accessibility Labels

You can override the default accessibility labels for the live region and dismiss control by passing an object with notificationsRegion and dismissButton as keys.
Library defaults to Notifications for the live region and Dismiss for the dismiss control.

<!-- Override the default accessibility labels to italian -->
<better-toaster
  [accessibilityLabels]="{
    notificationsRegion: 'Notifiche',
    dismissButton: 'Chiudi',
  }"
/>

API Reference

Input	Type	Default
`accessibilityLabels`	`object`	`-`
`closeButton`	`boolean`	`true`
`durationMs`	`number'Infinity'`	`4000`
`icons`	`object`	`-`
`mobileOffset`	`stringobject`	`'16px'`
`offset`	`stringobject`	`'24px'`
`position`	`'top-left''top-center''top-right''bottom-left''bottom-center''bottom-right'`	`'bottom-right'`
`richColors`	`boolean`	`false`
`theme`	`'light''dark''system'`	`'system'`

Considerations

Toast

On this page