Toast manager

A toast notification manager that displays toasts at a fixed position on the screen. Handles creation, positioning, stacking, and auto-dismissal of toast notifications.

Code

Framework

HTML

React

Angular

Position

Top center

Show success toast

Toggle dark mode

<certara-toast-manager></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager></certara-toast-manager>

Top left

Show success toast

Toggle dark mode

<certara-toast-manager position="top-left"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager position="top-left" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager position="top-left"></certara-toast-manager>

Top right

Show success toast

Toggle dark mode

<certara-toast-manager position="top-right"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager position="top-right" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager position="top-right"></certara-toast-manager>

Bottom center

Show success toast

Toggle dark mode

<certara-toast-manager position="bottom-center"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager position="bottom-center" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager position="bottom-center"></certara-toast-manager>

Bottom left

Show success toast

Toggle dark mode

<certara-toast-manager position="bottom-left"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager position="bottom-left" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager position="bottom-left"></certara-toast-manager>

Bottom right

Show success toast

Toggle dark mode

<certara-toast-manager position="bottom-right"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager position="bottom-right" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager position="bottom-right"></certara-toast-manager>

Stacking

Gap

Show three toasts

Toggle dark mode

<certara-toast-manager gap="24"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager gap={24} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager gap="24"></certara-toast-manager>

Max toasts

Show three toasts

Toggle dark mode

<certara-toast-manager max-toasts="2"></certara-toast-manager>

import { CertaraToastManager } from '@certara/certara-ui-react';

<CertaraToastManager maxToasts={2} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast-manager max-toasts="2"></certara-toast-manager>

Showing a toast programmatically

Place one <certara-toast-manager> on a page and use the show() method to programmatically show a toast.

Framework

HTML

React

Angular

const toastManager = document.querySelector('certara-toast-manager');
toastManager.show('success', {
  "prefix": "Success!",
  "message": "Your changes have been saved."
});

import {useRef} from 'react';
import {CertaraButton, CertaraToastManager} from '@certara/certara-ui-react';

function SaveButton() {
  const toastRef = useRef(null);

  const onSave = () => toastRef.current.show('success', {prefix: 'Success!', message: 'Your changes have been saved.'});

  return (
    <>
      <CertaraToastManager ref={toastRef} />
      <CertaraButton onCertaraClick={onSave}>Save</CertaraButton>
    </>
  );
}

import {Component, ViewChild} from '@angular/core';
import {CertaraToastManager} from '@certara/certara-ui-angular';

@Component({
  selector: 'app-save',
  template: `
    <certara-toast-manager></certara-toast-manager>
    <certara-button (certaraClick)="onSave()">Save</certara-button>
  `,
})
export class SaveComponent {
  @ViewChild(CertaraToastManager) toasts!: CertaraToastManager;

  onSave() {
    this.toasts.show('success', {prefix: 'Success!', message: 'Your changes have been saved.'});
  }
}

certara-toast-manager

Properties

gap

Attribute	gap
Type	number
Default	8
Required	false
Description	Gap between stacked toasts in pixels

maxToasts

Attribute	max-toasts
Type	number
Default	0
Required	false
Description	Maximum number of toasts to show at once (0 = unlimited)

position

Attribute	position
Type	"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"
Default	'top-center'
Required	false
Description	Position of the toast container on the screen

Events

There are no events available for this component

Methods

Name	Signature	Description
closeAll	() => Promise<void>	Close all currently visible toasts
getToastCount	() => Promise<number>	Get the current number of visible toasts
show	(type: VariantType, options: ToastOptions, allowMultiple?: boolean) => Promise<ToastHandle>	Show a toast notification

Slots

Name	Description
	Not used directly; toasts are created programmatically via the show() method