« Previous Next »

What is Toast?

Toast notifications are lightweight, non-intrusive messages that provide feedback to the user. They appear on the screen for a short duration and then automatically disappear, making them ideal for brief notifications that do not interrupt the user’s workflow.

Toasts can convey information such as success messages, errors, or general updates, enhancing user experience by providing immediate feedback without disrupting the workflow.

Why Use Toast?

  • Non-intrusive: They allow users to continue their tasks without interruption.
  • Feedback: Toasts provide quick feedback on user actions (e.g., form submissions, settings changes).
  • Customization: They can be styled and configured to suit the application’s design.
  • Duration Control: Developers can control how long the toast stays on the screen.
  • Accessibility: Toasts can be made accessible to screen readers, improving usability for all users.

Customizing Toasts

You can customize Toast notifications by adjusting their duration, style, and content. For example:

  • Change the background color based on the notification type (e.g., red for errors, green for success).
  • Modify the duration for which the Toast is visible to match the importance of the message.
  • Include interactive elements like buttons or links within the Toast.
  • Add icons or images to enhance visual appeal.

Best Practices for Using Toasts

  • Keep it brief: Toast messages should be concise and to the point.
  • Prioritize important notifications: Use Toasts for actions that require user acknowledgment.
  • Consider user context: Ensure that Toast notifications are relevant to the user's current task.
  • Avoid overusing: Too many Toasts can overwhelm users; use them judiciously.

Use Cases for Toast Notifications

  • Confirmations for successful form submissions.
  • Alerts for unsuccessful actions (e.g., failed login attempts).
  • Informative messages about updates or changes in the application.
  • Warnings about unsaved changes before navigating away from a page.

Examples of Toasts

Click the buttons below to see Toast notifications in action:

Toast Code Examples

  
    <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Bootstrap Toast Examples</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
      <body>          
                
        <div class="container mt-5">
            <div class="d-flex flex-column gap-2 mb-3">
                <!-- Toast Trigger Buttons -->
                <button type="button" class="btn btn-success" id="successToastBtn">Show Success Toast</button>
                <button type="button" class="btn btn-danger" id="errorToastBtn">Show Error Toast</button>
                <button type="button" class="btn btn-info" id="infoToastBtn">Show Info Toast</button>
                <button type="button" class="btn btn-warning" id="warningToastBtn">Show Warning Toast</button>
                <button type="button" class="btn btn-dark" id="customToastBtn">Show Custom Toast</button>
            </div>
        
            <!-- Toast Notification Container -->
            <div class="toast-container position-fixed bottom-0 end-0 p-3" aria-live="polite" aria-atomic="true">
                <div class="toast" id="successToast" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
                    <div class="toast-header">
                        <strong class="me-auto">Success</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        Your action was successful!
                    </div>
                </div>
        
                <div class="toast" id="errorToast" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
                    <div class="toast-header">
                        <strong class="me-auto">Error</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        There was an error processing your request.
                    </div>
                </div>
        
                <div class="toast" id="infoToast" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
                    <div class="toast-header">
                        <strong class="me-auto">Info</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        This is some information for you.
                    </div>
                </div>
        
                <div class="toast" id="warningToast" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
                    <div class="toast-header">
                        <strong class="me-auto">Warning</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        This is a warning message. Please check the input fields!
                    </div>
                </div>
        
                <div class="toast" id="customToast" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
                    <div class="toast-header">
                        <strong class="me-auto">Custom Message</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        This is a customizable toast message with extra information.
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            // Function to show toast notifications
            function showToast(toastId) {
                const toastElement = document.getElementById(toastId);
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
                toastElement.style.display = 'block'; // Ensure toast is displayed
            }
        
            // Event listeners for toast buttons
            document.getElementById('successToastBtn').addEventListener('click', () => showToast('successToast'));
            document.getElementById('errorToastBtn').addEventListener('click', () => showToast('errorToast'));
            document.getElementById('infoToastBtn').addEventListener('click', () => showToast('infoToast'));
            document.getElementById('warningToastBtn').addEventListener('click', () => showToast('warningToast'));
            document.getElementById('customToastBtn').addEventListener('click', () => showToast('customToast'));
        </script>
          
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     </body>
    </html>

Output Example

« Previous Next »