Toasts

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

Show design guidelines

Code

Variants

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>

Success

Along with a description that follows the title.

Toggle dark mode

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

Warning

Along with a description that follows the title.

Toggle dark mode

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

Danger

Along with a description that follows the title.

Toggle dark mode

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

Props

Dismissible

Dismissible toasts have a close button

Toggle dark mode

<certara-toast dismissible>
  Dismissible toasts have a close button
</certara-toast>

Headline

Toast with a headline

Toggle dark mode

<certara-toast headline="Headline">
  Toast with a headline
</certara-toast>

Shake

Will appear with a shake animation

Toggle dark mode

<certara-toast headline="Shake" shake>
  Will appear with a shake animation
</certara-toast>

CTA Slot

Formatted buttons with toast-ctas slot

Save Cancel

Toggle dark mode

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

Alignment

Center

Toggle dark mode

<certara-toast variant="success" align-content="center" headline="Saved!">
</certara-toast>

Right

Toggle dark mode

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

Left (default)

Toggle dark mode

<certara-toast variant="success" align-content="left" headline="Left">
</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	true

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