Toast

Design guidelines

Code

Variants

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

color

Attribute	color
Type	"danger" | "info" | "success" | "warning"
Default	undefined
Required	false
Description	Sets the theme/color of the toast. Defaults to info.

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	undefined
Required	false
Description	Sets the theme/color of the toast. DEPRECATED. Use color instead. Will be removed in the next major version.

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

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

Design guidelines

Variants

Info

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

Play

Toggle dark mode

Success

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

Play

Toggle dark mode

Warning

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

Play

Toggle dark mode

Danger

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

Play

Toggle dark mode

In practice

• Toast alerts may be set to auto-dismiss after a certain period of time, but should always include UI for the user to manually dismiss.
• Float on top of the other UI elements on the page; their presence does not alter the position of any other elements.
• Always include a drop shadow.
• Appear on the screen with an animation.

Variants

The four variants use different icons and colors to indicate the type and urgency of the message.

• Info: informs the user of a change or gives them advice.
• Success: lets the user know of a successful outcome. NOTE: Toast alerts are used by default for this type of messaging. Use a banner alert only if it is persistent, delayed, or if there is an additional action.
• Warning: lets the user know about important system information that deserves caution.
• Danger: alerts the user of a problem that requires immediate attention.

Placement

• Default placement is top center of the page; sliding in from the left.
• Final placement and animation direction may be determined on a case-by-case basis.

By default, toast alerts should appear stacked over content, at the top center of the viewport.

Content guidelines

• Toast alerts typically do not include a title.
• It’s best to keep their content short since they cover other UI elements on the page. (140 character max.)
• Use sentence case and appropriate punctuation.

Accessibility

• Toast alerts are dismissible with keyboard [esc].
• For alerts with no actions, notify the user via assistance technologies without having to change focus to the toast alert.

Follow the accessibility guidelines for each component found in the alert. View guidelines

W3 guidelines for status messages

Design resources

View component in Figma