Toast notifications or toast messages are little boxes that pop up on the side of the screen, display some message and disappear on their own or a button click. Toast notifications are very common. These can be used to inform the user about the completion of a task, an error that occurred during the task or to give the user some sort of feedback.Â
Toast notifications usually disappear in 4-5 seconds on their own. In some cases where the notifications are provided with a close button, the user can choose to make them go away by clicking on the close button.
Examples where a toast notification can be used:
- When you are downloading some files in the background, you receive a toast message saying, “The files are downloaded successfully”.
- While sending a message you receive error feedback, “Message not send due to technical issues”.
- When a service you are using is about to expire, you get a warning message, “2 days left for your subscription to expire. Renew now”.
Now that you know what toast notifications are, let us get started and create some toast UI design.
Video Tutorial:
You can check out the video tutorial of this topic below. If you like the tutorial, do subscribe to my youtube channel.
HTML:
Create a file and name it “index.html”. Now copy the code below and paste in your newly create HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<title>Toast Message UI</title>
</head>
<body>
<div class="wrapper">
<div class="toast success">
<div class="container-1">
<i class="fas fa-check-circle"></i>
</div>
<div class="container-2">
<p>Success</p>
<p>Your changes are saved successfully</p>
</div>
<button>×</button>
</div>
<div class="toast error">
<div class="container-1">
<i class="fas fa-times-circle"></i>
</div>
<div class="container-2">
<p>Error</p>
<p>Error has occured while saving changes.</p>
</div>
<button>×</button>
</div>
<div class="toast info">
<div class="container-1">
<i class="fas fa-info-circle"></i>
</div>
<div class="container-2">
<p>Info</p>
<p>New settings available on your account.</p>
</div>
<button>×</button>
</div>
<div class="toast warning">
<div class="container-1">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="container-2">
<p>Warning</p>
<p>Username you have entered is invalid.</p>
</div>
<button>×</button>
</div>
</div>
</body>
</html>
Â
CSS:
Create a file and save it as “style.css”. Copy the code below and paste it in the “style.css” file.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
font-family: "Poppins",sans-serif;
font-size: 14px;
}
body{
background-color: #f9f9f9;
}
.wrapper{
width: 380px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.toast{
width: 100%;
height: 80px;
padding: 20px;
background-color: #ffffff;
border-radius: 7px;
display: grid;
grid-template-columns: 1.3fr 6fr 0.5fr;
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.success{
border-left: 8px solid #47D764;
}
.error{
border-left: 8px solid #ff355b;
}
.info{
border-left: 8px solid #2F86EB;
}
.warning{
border-left: 8px solid #FFC021;
}
.error i{
color: #ff355b;
}
.info i{
color: #2F86EB;
}
.warning i{
color: #FFC021;
}
.toast:not(:last-child){
margin-bottom: 50px;
}
.container-1,.container-2{
align-self: center;
}
.container-1 i{
font-size: 35px;
}
.success i{
color: #47D764;
}
.container-2 p:first-child{
color: #101020;
font-weight: 600;
font-size: 16px;
}
.container-2 p:last-child{
font-size: 12px;
font-weight: 400;
color: #656565;
}
.toast button{
align-self: flex-start;
background-color: transparent;
font-size: 25px;
color: #656565;
line-height: 0;
cursor: pointer;
}
That’s it! You have toast messages with a beautiful UI ready. In the next tutorial, we will learn how you can add a slide out animation to these notification along with a close button. Stay tuned for the coming tutorial.
I hope you liked the tutorial. Do post your comments, suggestions and feedbacks below.
