Toast Alerts

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

Code

Variants

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

Certara UI
HTML

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

certara-toast

Properties

Property	Attribute	Description	Type	Default
`alignContent`	`align-content`	The content alignment inside the toast	`"center" \| "left" \| "right"`	`'left'`
`dismissible`	`dismissible`	If true, the toast can be dismissed by clicking the close button	`boolean`	`false`
`headline`	`headline`	The bolded first sentence of the toast	`string`	`undefined`
`shake`	`shake`	If true, the toast will shake when it appears	`boolean`	`false`
`variant`	`variant`	sets the theme/color of the toast	`"danger" \| "info" \| "success" \| "warning"`	`'info'`

Events

Event	Description	Type
`certaraClose`	Event emitted when the toast is closed if dismissible is true	`CustomEvent<void>`

Slots

Slot	Description
	Default toast content
`"alert-ctas"`	Slot for additional call-to-action buttons or links

Dependencies

Depends on

certara-alert

Graph

graph TD;
  certara-toast --> certara-alert
  certara-alert --> certara-close-button
  style certara-toast fill:#f9f,stroke:#333,stroke-width:4px

Heading

Lorem ipsum dolor sit amet consectetur adipiscing elit con.

<div class="alert alert--success alert--toast" role="alert">
  <button class="btn--close" data-dismiss="alert" type="button">
    <span class="visually-hidden">Close</span>
  </button>
  <p class="alert__heading">Heading</p>
  <p class="alert__description">Lorem ipsum dolor sit amet consectetur adipiscing elit con.</p>
</div>

NameDescriptionClassCopy

title
Heading content
.alert__heading
dismiss
Closes the alert
.alert—dismissible
description
Description content
.alert__description

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.

New response to your comment.

//highlight-next-line
<div class="alert alert--success alert--toast alert--toast--bottom-right role="alert">
  <p class="alert__description">…</p>
</div>

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