Primer CSS Toasts Variations

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.

Primer CSS offers Toast that is used to show live and time-sensitive responses to the user. In this article, we will discuss Toast variations. It is used to communicate different states using error, warning, and success modifiers.

Primer CSS Toasts Variations classes:

• Toast: This class is the main container of the toast element of Primer CSS.
• Toast-icon: This class is used to define the toast icon.
• Toast-success: This class is used to create green-colored toast icons.
• Toast-content: This class contains the toast message along with the link.
• Toast-error: This class contains the toast error message.

Syntax:

<div class="Toast Toast--success">
 <span class="Toast-icon">
 <svg width="..." height="..." viewBox="..." 
 class="octicon octicon-check" aria-hidden="true">
 <path fill-rule="evenodd" d="..." />
 </svg>
 </span>
 
 <span class="Toast-content">
 ...
 </span>
</div>

Example 1: Below is the example that demonstrates the use of Primer CSS Toasts variations using Toast--error class.

Output:

👁 Image

Example 2: Below is the example that demonstrates the use of Primer CSS Toasts variations using Toast--warning class.

Output:

👁 Image

Reference: https://primer.style/#variations