thind ui

Menu

Components
Styleguide
Changelog

Getting Started

Installation
Dark / Light Mode
Thind JS
Figma File

Components

Accordion
Alert
Breadcrumbs
Card
Checkbox
Code Block
Dialog
Dropdown
Inputs
Form
Ordered Timeline List
Scrollbars
Radio Buttons
Toast
Tabs
Toggle Switch
Tooltip

Thind.dev Newsletter

Webflow developer goodies directly in your inbox.

You have been added to the list ✌️
Oops! Something went wrong while submitting the form.
Made by
Home
Components
Toast

Toast

The Toast component is powered by Toastify and has been adapted to work seamlessly with the Thind Styleguide. It provides a sleek, customizable notification system that supports both light and dark modes, ensuring visual consistency across your project. This component is perfect for displaying transient messages and alerts in a user-friendly manner, enhancing the overall user experience.

Installation

  1. Add to CSS to <head>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

  2. Import Toastify JS

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    or

    npm install --save toastify-js
import Toastify from 'toastify-js';

  3. Add a Global Toast Function

    <script>
// Function to show toast notification
window.showToast = function (message, type) {
  if (Toastify) {
    let style = {
      background: "var(--body--color--foreground)",
      border: "1px solid var(--border--color--light)",
      color: "var(--body--color--background)",
    }
    if (type === 'error') {
      style = {
        background: "var(--button--color--danger--hover-background",
        border: "1px solid var(--button--color--danger--hover-background)",
        color: "var(--body--color--background)",
      }
    } else if (type === 'success') {
      style = {
        background: "var(--button--color--success--hover-background)",
        border: "1px solid var(--button--color--success--hover-background)",
        color: "var(--body--color--background)",
      }
    }
    // If Toastify is loaded, show the toast
    Toastify({
      text: message,
      duration: 3000,
      close: false,
      gravity: "bottom",
      position: "right",
      stopOnFocus: true,
      style: {
        ...style,
        fontSize: "0.75rem",
        borderRadius: "0.5rem",
      }
    }).showToast();
  } else {
    // If Toastify is not loaded, queue the message
    window.toastQueue = window.toastQueue || [];
    window.toastQueue.push({
      message,
      type
    });
  }
}
</script>

Using Toast

  1. Default

    Preview
    Code
    <script>
const toastButton = document.getElementById("default-toast");
toastButton.addEventListener("click", function() {
  showToast("Your toast message");
});
</script>

  2. Error State

    Preview
    Code
    <script>
const errorToastButton = document.getElementById("error-toast");
errorToastButton.addEventListener("click", function() {
  showToast("Your toast message", "error");
});
</script>

  3. Success State

    Preview
    Code
    <script>
const successToastButton = document.getElementById("success-toast");
successToastButton.addEventListener("click", function() {
  showToast("Your toast message", "success");
});
</script>