Primer CSS Toast with Dismiss

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.

Primer CSS Toast with dismiss is used to create an interface where the user is allowed to explicitly dismiss a Toast. To create that interface you need to add Toast-dismissButton class under the Toast class.

Primer CSS Toast With Dismiss Class:

• Toast-dismissButton: This class is used to allow a user to explicitly dismiss a Toast.

Syntax:

<div class="Toast Toast--animateIn">
 ...
 <button class="Toast-dismissButton">
 ...
 </button>
</div>

The below examples illustrate the Primer CSS Toast with Dismiss.

Example 1: In this example, we will use animate in animation on Toast with Dismiss.

Output:

👁 Image

Example 2: In this example, we will not use any animation on Toast with Dismiss.

Output:

👁 Image

Reference: https://primer.style/#toast-with-dismiss