Toast

Show design guidelines

Toast alerts are used to provide timely information about system occurrences as well as feedback on the outcome of user actions.

Code

Framework

HTML

React

Angular

Info

Along with a description that follows the title.

Toggle dark mode

<certara-toast headline="Notice title">
  Along with a description that follows the title.
</certara-toast>

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

<CertaraToast headline="Notice title">
  Along with a description that follows the title.
</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast headline="Notice title">
  Along with a description that follows the title.
</certara-toast>

Success

Your changes have been saved.

Toggle dark mode

<certara-toast variant="success" headline="Success!">Your changes have been saved.</certara-toast>

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

<CertaraToast variant="success" headline="Success!">Your changes have been saved.</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="success" headline="Success!">Your changes have been saved.</certara-toast>

Warning

Please review your changes before proceeding.

Toggle dark mode

<certara-toast variant="warning" headline="Warning">
  Please review your changes before proceeding.
</certara-toast>

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

<CertaraToast variant="warning" headline="Warning">
  Please review your changes before proceeding.
</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="warning" headline="Warning">
  Please review your changes before proceeding.
</certara-toast>

Danger

Something went wrong. Please try again.

Toggle dark mode

<certara-toast variant="danger" headline="Error">
  Something went wrong. Please try again.
</certara-toast>

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

<CertaraToast variant="danger" headline="Error">
  Something went wrong. Please try again.
</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="danger" headline="Error">
  Something went wrong. Please try again.
</certara-toast>

Props

Framework

HTML

React

Angular

Dismissible

Click the X to dismiss this toast.

Play

Toggle dark mode

<certara-toast dismissible headline="Dismissible">Click the X to dismiss this toast.</certara-toast>

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

<CertaraToast dismissible headline="Dismissible">Click the X to dismiss this toast.</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast dismissible headline="Dismissible">Click the X to dismiss this toast.</certara-toast>

Shake

This toast appears with a shake animation.

Play

Toggle dark mode

<certara-toast headline="Shake" shake>This toast appears with a shake animation.</certara-toast>

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

<CertaraToast headline="Shake" shake>This toast appears with a shake animation.</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast headline="Shake" shake>This toast appears with a shake animation.</certara-toast>

With CTAs

Toast with action buttons

Save Cancel

Play

Toggle dark mode

<certara-toast headline="With actions">
  Toast with action buttons
  <div slot="toast-ctas">
    <certara-button size="sm">Save</certara-button>
    <certara-button size="sm" color="secondary">Cancel</certara-button>
  </div>
</certara-toast>

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

<CertaraToast headline="With actions">
  Toast with action buttons
  <div slot="toast-ctas">
    <CertaraButton size="sm">Save</CertaraButton>
    <CertaraButton size="sm" color="secondary">Cancel</CertaraButton>
  </div>
</CertaraToast>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast headline="With actions">
  Toast with action buttons
  <div slot="toast-ctas">
    <certara-button size="sm">Save</certara-button>
    <certara-button size="sm" color="secondary">Cancel</certara-button>
  </div>
</certara-toast>

Alignment

Framework

HTML

React

Angular

Left

Toggle dark mode

<certara-toast variant="success" align-content="left" headline="Left aligned"></certara-toast>

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

<CertaraToast variant="success" alignContent="left" headline="Left aligned" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="success" align-content="left" headline="Left aligned"></certara-toast>

Center

Toggle dark mode

<certara-toast variant="success" align-content="center" headline="Center aligned"></certara-toast>

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

<CertaraToast variant="success" alignContent="center" headline="Center aligned" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="success" align-content="center" headline="Center aligned"></certara-toast>

Right

Toggle dark mode

<certara-toast variant="success" align-content="right" headline="Right aligned"></certara-toast>

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

<CertaraToast variant="success" alignContent="right" headline="Right aligned" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-toast variant="success" align-content="right" headline="Right aligned"></certara-toast>

certara-toast

Properties

alignContent

Attribute	align-content
Type	"center" | "left" | "right"
Default	'left'
Required	false
Description	The content alignment inside the toast

dismissible

Attribute	dismissible
Type	boolean
Default	false
Required	false
Description	If true, the toast can be dismissed by clicking the close button

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	The bolded first sentence of the toast

shake

Attribute	shake
Type	boolean
Default	false
Required	false
Description	If true, the toast will shake when it appears

variant

Attribute	variant
Type	"danger" | "info" | "success" | "warning"
Default	'info'
Required	false
Description	sets the theme/color of the toast

Events

Name	Description	Bubbles
certaraClose	Event emitted when the toast is closed if dismissible is true	false

Methods

There are no public methods available for this component

Slots

Name	Description
	Default toast content
toast-ctas	Slot for additional call-to-action buttons or links