Primer CSS Toasts

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Toast is a kind of alert message or push notification, generally used to notify or display short information or time-sensitive feedback to the users.

Primer CSS Toasts:

• Default: This is the default toast used for adding a default message. 
• Variations: The toast has various variations so, it uses the success, warning, and error modifiers to communicate different states.
• Toast with dismiss: It allows the user to dismiss a Toast.
• Toast with link: It allows the user to add a link within a toast.
• Toast animation in: It allows the user to add animation in and out of a toast.
• Toast with loading animation: It allows the user to a loading spinner.
• Toast position: This is used to position Toasts at the bottom left of the viewport i.e, using position-fixed bottom-0 left-0.

Syntax:

<div class="Primer-CSS-Toasts">
 ...
<div>

Example 1: The below example demonstrates the variations of toast in Primer CSS.

Output:

Example 2: The below example demonstrates the toast with a link & the close button in Primer CSS.

Output: