Primer CSS Toasts Default

Primer CSS is a CSS framework that is built to bootstrap your web project with premade design system which includes spacing, typography, color, and many components and utilities. It follows the BEM (Block, Element, and Modifier) approach to name the CSS classes.

Primer CSS Toasts are used to show live feedback to the user. To create a default toast the Toast class is used. The Default toast includes an icon and a message. The toast message can also be formatted. It is suggested to use the info icon and to keep the toast message under 140 characters.

Primer CSS Toasts Default Classes:

• Toast: This class is the main container of the Primer CSS toast element.
• Toast-icon: This class wraps the toast icon.
• Toast-content: This class contains the toast message.

Syntax:

<div class="Toast">
 ...
<div>

Example 1: This example shows the use of the Toast class to create a default toast.

Output: 

👁 Image

Example 2: This example shows the default text with a formatted toast message.

Output:

👁 Image

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