Primer CSS Toast with Link
Last Updated :
08 Apr, 2022
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 link in the toast message we wrap the action text inside the <a> element.
Primer CSS Toast with Link Classes:
- Toast: This class is the main container of the toast element of Primer CSS.
- Toast-icon: This class wraps the toast icon.
- Toast-content: This class contains the toast message along with the link.
Syntax:
<div class="Toast-content">....<a href="">Action</a>....</div>
Example 1: In this example, we will include an action inside the toast content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Toast with Link - Primer CSS</title>
<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 - Toast with only Action</h4>
</div>
<div class="d-flex flex-justify-center">
<!-- Toast -->
<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>
<!-- Toast containing only action -->
<span class="Toast-content">
<a href="https://geeksforgeeks.org">
GeeksforGeeks Home
</a>
</span>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will include an action along with the toast message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Toast with Link - Primer CSS</title>
<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 - Toast with Action with message</h4>
</div>
<div class="d-flex flex-justify-center">
<!-- Toast -->
<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>
<!-- Toast containing action with message -->
<span class="Toast-content">Click here to go to
<a href="https://geeksforgeeks.org">
GeeksforGeeks Home
</a>
</span>
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/components/toasts#toast-with-link
Similar Reads
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
3 min read
Primer CSS Toast with Loading Animation 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 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 Toasts Toast Position 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 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 li
2 min read