Primer CSS Toasts Default
Last Updated :
20 Apr, 2022
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2 style="color:green">GeeksforGeeks</h2>
<h4>Primer CSS - Default Toast</h4>
</div>
<div class="d-flex flex-justify-center">
<!-- Toast -->
<div class="Toast">
<span class="Toast-icon">
<!-- SVG for the "info" icon -->
<svg width="14" height="16" viewBox="0 0 14 16"
class="octicon octicon-info" aria-hidden="true">
<path fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0
1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0
.52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0
0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14
0-5.7 2.54-5.7 5.68 0 3.14 2.56
5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7
.98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" />
</svg>
</span>
<span class="Toast-content">
GeeksforGeeks is Awesome.
</span>
</div>
</div>
</body>
</html>
Output:
Example 2: This example shows the default text with a formatted toast message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
rel="stylesheet" />
</head>
<body>
<div class="text-center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4>Primer CSS - Default Toast with Formatted message</h4>
</div>
<div class="d-flex flex-justify-center">
<!-- Toast -->
<div class="Toast">
<span class="Toast-icon">
<!-- SVG for the "info" icon -->
<svg width="14" height="16" viewBox="0 0 14 16"
class="octicon octicon-info" aria-hidden="true">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0
1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0
.52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0
0 1-.7.3c-.28 0-.52-.11-.7-.3zM8
7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14
0-5.7 2.54-5.7 5.68 0 3.14 2.56
5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7
.98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" />
</svg>
</span>
<span class="Toast-content">
<b>GeeksforGeeks</b> is <i>Awesome</i>.
</span>
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/components/toasts#default
Similar Reads
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
3 min read
Primer CSS Alerts Default 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
2 min read
Primer CSS Labels Default 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Default Border 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Toast with Link The Primer CSS Toast element is used to show important messages to the user to enhance the user experience. In this article, we will be discussing Primer CSS Toast with Link. By including a link in the toast, we can allow users to take necessary actions in response to the toast message. To include a
2 min read