Toast

Toast display a temporary notification related to an interaction between user and the website. They usually stay on the screen for 2-3 seconds and then disappear. They're meant to be noticed without disrupting a user's experience or flow. In order to only use the Toast Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document.

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Alert/alert.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Toast/toast.css" />

Profile has been updated successfully!

An update is available to install!

We encountered an error while processing your request!

Custom Toast

Message / Notification Content

                            
                            <div class="alert alert-icon alert-success toast">
                                <i class="fas fa-check-circle"></i> Profile has been updated successfully!
                            </div>
                            <div class="alert alert-icon alert-info toast">
                                <i class="fas fa-question-circle"></i> An update is available to install!
                            </div>
                            <div class="alert alert-icon alert-error toast">
                                <i class="fas fa-times-circle"></i> We encountered an error while processing your request!
                            </div>
                            <div class="alert alert-icon alert-warning toast-custom">
                                <h4 class="toast-title"><i class="fas fa-exclamation-circle"></i>Custom Toast</h4>
                                <span>Message / Notification Content</span>
                            </div>