In this article, we will see the implementation and accessibility of Primer CSS Toasts.
It 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. 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.
The 7 categories of Primer CSS Toasts are:
- Default: This is the default toast used for adding a default message.
- Variations: The toast has various variations so, it uses 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.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Primer CSS Toast</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
<body>
<center>
<div class="m-4 pt-4">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Primer CSS Toast</h2>
</div>
<div class="p-1">
<div class="Toast Toast--success">
<span class="Toast-icon">
<svg width="12" height="16"
viewBox="0 0 12 16"
class="octicon octicon-check"
aria-hidden="true">
<path fill-rule="evenodd" d=
"M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
</svg>
</span>
<span class="Toast-content">
Welcome to GeeksforGeeks.
</span>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Primer CSS Toast Position at the bottom right position.
HTML
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Toast Position </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>A computer science portal for geeks</h3>
<h2> Primer CSS Toast Position </h2>
</div>
<div class="position-fixed bottom-1 right-2">
<div class="Toast">
<span class="Toast-icon">
<svg class="octicon"
viewBox="0 0 15 15"
width="25" height="25">
<path d=
"M13.78 4.22a.75.75 0 010 1.06l-7.25
7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0
011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<span class="Toast-content ">
GeeksforGeeks- Bottom Right
</span>
</div>
</div>
</body>
</html>
|
Output: