search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Toasts

    Tailwind CSS Toasts

    Use responsive toast component with helper examples for notification popup, notification toast, toast message & more. Free download, open-source license.

    Required ES init: Toast *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    Click the buttons to launch the toasts.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.
    • HTML
    • javascript
    • umd
            
                
          <button
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="primary">
            Primary
          </button>
          <button
            class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
            id="secondary">
            Secondary
          </button>
          <button
            class="inline-block rounded bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-success-3 transition duration-150 ease-in-out hover:bg-success-accent-300 hover:shadow-success-2 focus:bg-success-accent-300 focus:shadow-success-2 focus:outline-none focus:ring-0 active:bg-success-600 active:shadow-success-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="success">
            Success
          </button>
          <button
            class="inline-block rounded bg-danger px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-danger-3 transition duration-150 ease-in-out hover:bg-danger-accent-300 hover:shadow-danger-2 focus:bg-danger-accent-300 focus:shadow-danger-2 focus:outline-none focus:ring-0 active:bg-danger-600 active:shadow-danger-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="danger">
            Danger
          </button>
          <button
            class="inline-block rounded bg-warning px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-warning-3 transition duration-150 ease-in-out hover:bg-warning-accent-300 hover:shadow-warning-2 focus:bg-warning-accent-300 focus:shadow-warning-2 focus:outline-none focus:ring-0 active:bg-warning-600 active:shadow-warning-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="warning">
            Warning
          </button>
          <button
            class="inline-block rounded bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-info-3 transition duration-150 ease-in-out hover:bg-info-accent-300 hover:shadow-info-2 focus:bg-info-accent-300 focus:shadow-info-2 focus:outline-none focus:ring-0 active:bg-info-600 active:shadow-info-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="info">
            Info
          </button>
          <button
            class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="light">
            Light
          </button>
          <button
            class="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="dark">
            Dark
          </button>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg  dark:bg-slate-900 dark:text-primary-500 z-[1050]"
          id="toast-primary"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#234479]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-clip-padding text-sm bg-secondary-100 text-secondary-800 shadow-lg  dark:bg-[#202124] dark:text-secondary-400"
          id="toast-secondary"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#d9dbe0] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#5f646b]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-success-100 bg-clip-padding text-sm text-success-700 shadow-lg  dark:bg-green-950 dark:text-success-500/80"
          id="toast-success"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#a1dbb8] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#0c622e]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-danger-100 bg-clip-padding text-sm text-danger-700 shadow-lg  dark:bg-[#2c0f14] dark:text-danger-500"
          id="toast-danger"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#f1b7c1] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#842e3c]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-warning-100 bg-clip-padding text-sm text-warning-800 shadow-lg  dark:bg-[#2e2005] dark:text-warning-500"
          id="toast-warning"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#f4d9a4] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#896110]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-info-100 bg-clip-padding text-sm  text-info-800 shadow-lg  dark:bg-[#11242a] dark:text-info-500"
          id="toast-info"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#bbe1ed] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#326c7f]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-neutral-100 bg-clip-padding text-sm text-zinc-600 shadow-lg  dark:bg-neutral-600 dark:text-neutral-100"
          id="toast-light"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#eeeeee] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#616161]">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
    
        <div
          class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-[#202124] bg-clip-padding text-sm text-zinc-100 shadow-lg "
          id="toast-dark"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-twe-toast-init
          data-twe-position="top-right"
          data-twe-autohide="true"
          data-twe-delay="2000">
          <div
            class="flex items-center justify-between rounded-t-lg border-b-2 border-[#9e9e9e] bg-clip-padding px-4 py-[0.65rem]  dark:border-surface-dark">
            <div class="flex items-center">
              <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <p class="font-bold">TW Elements</p>
            </div>
            <div class="flex items-center">
              <p class="text-xs">11 mins ago</p>
              <button
                type="button"
                class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale"
                data-twe-toast-dismiss
                aria-label="Close">
                <span
                  class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18 18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <div class="break-words rounded-b-lg p-4 text-center">
            Hello, world! This is a toast message.
          </div>
        </div>
        
            
        
            
                
        // Initialization for ES Users
        import { Toast, initTWE } from 'tw-elements';
    
        initTWE({ Toast });
        
        const triggers = [
          "primary",
          "secondary",
          "success",
          "danger",
          "warning",
          "info",
          "light",
          "dark",
        ];
        const basicInstances = [
          "toast-primary",
          "toast-secondary",
          "toast-success",
          "toast-danger",
          "toast-warning",
          "toast-info",
          "toast-light",
          "toast-dark",
        ];
    
        triggers.forEach((trigger, index) => {
          let basicInstance = Toast.getInstance(
            document.getElementById(basicInstances[index])
          );
          document.getElementById(trigger).addEventListener("click", () => {
            basicInstance.show();
          });
        });
        
            
        
            
                
        const triggers = [
          "primary",
          "secondary",
          "success",
          "danger",
          "warning",
          "info",
          "light",
          "dark",
        ];
        const basicInstances = [
          "toast-primary",
          "toast-secondary",
          "toast-success",
          "toast-danger",
          "toast-warning",
          "toast-info",
          "toast-light",
          "toast-dark",
        ];
    
        triggers.forEach((trigger, index) => {
          let basicInstance = twe.Toast.getInstance(
            document.getElementById(basicInstances[index])
          );
          document.getElementById(trigger).addEventListener("click", () => {
            basicInstance.show();
          });
        });
        
            
        

    Static example

    TW Elements

    11 mins ago

    Static Example
    • HTML
    • javascript
            
                
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-white bg-clip-padding text-sm shadow-lg  dark:bg-surface-dark"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show>
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-black/[0.175] bg-clip-padding px-4 py-[0.65rem] text-surface/75 dark:border-white/10 dark:text-white/75">
              <p class="font-bold">TW Elements</p>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="break-words rounded-b-lg p-4 text-center text-surface dark:text-white">
              Static Example
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Toast, initTWE } from 'tw-elements';
    
          initTWE({ Toast });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Color examples

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.
    • HTML
    • javascript
            
                
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg  dark:bg-slate-900 dark:text-primary-500"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#234479]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-clip-padding text-sm bg-secondary-100 text-secondary-800 shadow-lg  dark:bg-[#202124] dark:text-secondary-400 "
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#d9dbe0] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#5f646b]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-success-100 bg-clip-padding text-sm text-success-700 shadow-lg  dark:bg-green-950 dark:text-success-500/80"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#a1dbb8] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#0c622e]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-danger-100 bg-clip-padding text-sm text-danger-700 shadow-lg  dark:bg-[#2c0f14] dark:text-danger-500"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#f1b7c1] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#842e3c]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-warning-100 bg-clip-padding text-sm text-warning-800 shadow-lg  dark:bg-[#2e2005] dark:text-warning-500"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#f4d9a4] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#896110]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-info-100 bg-clip-padding text-sm  text-info-800 shadow-lg  dark:bg-[#11242a] dark:text-info-500"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#bbe1ed] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#326c7f]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-neutral-100 bg-clip-padding text-sm text-zinc-600 shadow-lg  dark:bg-neutral-600 dark:text-neutral-100"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#eeeeee] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#616161]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
    
          <div
            class="pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-[#202124] bg-clip-padding text-sm text-zinc-100 shadow-lg "
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-toast-show
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#9e9e9e] bg-clip-padding px-4 py-[0.65rem]  dark:border-surface-dark">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Toast, initTWE } from 'tw-elements';
    
          initTWE({ Toast });
          
            
        

    Placement

    You can set the position of every toast using the data-twe-position attribute or update() method.

    Select horizontal / vertical alignment

    Current position: top-right

    TW Elements

    11 mins ago

    Hello, world! This is a toast message.
    • HTML
    • javascript
    • umd
            
                
          <div
            class="pointer-events-auto mx-auto hidden w-96 rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg  dark:bg-slate-900 dark:text-primary-500"
            id="placement-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-position="top-right"
            >
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#234479]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Hello, world! This is a toast message.
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Toast,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Toast });
    
          const placementToast = document.getElementById("placement-example");
          Toast.getInstance(placementToast).show();
          
            
        
            
                
          const placementToast = document.getElementById("placement-example");
          twe.Toast.getInstance(placementToast).show();
          
            
        

    Offset

    You can also change offset of every notification using data-twe-offset attribute or update() method.

    TW Elements

    11 mins ago

    Offset: 100px
    • HTML
    • javascript
    • umd
            
                
          <div
            class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg  dark:bg-slate-900 dark:text-primary-500"
            id="offset-toast"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-position="top-right"
            data-twe-offset="100"
            data-twe-delay="2000"
            data-twe-autohide="true">
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#234479]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Offset: 100px
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Toast,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Toast });
    
          const offsetToast = document.getElementById("offset-oast");
          Toast.getInstance(offsetToast).show();
          
            
        
            
                
          const offsetToast = document.getElementById("offset-toast");
          twe.Toast.getInstance(offsetToast).show();
          
            
        

    Container

    You can display an toast anywhere. Just put it in your target element and fill the data-twe-container attribute with id or class of parent.

    TW Elements

    11 mins ago

    Toast inside another element!
    • HTML
    • javascript
    • umd
            
                
          <div
            class="pointer-events-auto mx-auto hidden w-80 max-w-full rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg  dark:bg-slate-900 dark:text-primary-500"
            id="container-toast"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-twe-toast-init
            data-twe-delay="2000"
            data-twe-autohide="true"
            data-twe-position="top-right"
            data-twe-container="#parent-container-example">
            <div
              class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem]  dark:border-[#234479]">
              <div class="flex items-center">
                <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="font-bold">TW Elements</p>
              </div>
              <div class="flex items-center">
                <p class="text-xs">11 mins ago</p>
                <button
                  type="button"
                  class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                  data-twe-toast-dismiss
                  aria-label="Close">
                  <span
                    class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="currentColor">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M6 18 18 6M6 6l12 12" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div class="break-words rounded-b-lg p-4 text-center">
              Toast inside another element!
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Toast,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Toast });
    
          const containerToast = document.getElementById("container-toast");
          Toast.getInstance(containerToast).show();
          
            
        
            
                
          const containerToast = document.getElementById("container-toast");
          twe.Toast.getInstance(containerToast).show();
          
            
        

    Stacking

    You can turn on/off stacking your notifications using data-twe-stacking attribute or update() method.

    • HTML
    • javascript
    • umd
            
                
          <button
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="stacking-trigger-example">
            Show notification
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Toast,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Toast });
    
          let toastCount = 0;
          const colors = [
            "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
            "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
            "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
            "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
            "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
            "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
            "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
            "bg-[#202124] text-zinc-100 dark:text-zinc-100",
          ];
      
          const borderColors = [
            "border-[#b1c6ea] dark:border-[#234479]",
            "border-[#d9dbe0] dark:border-[#5f646b]",
            "border-[#a1dbb8] dark:border-[#0c622e]",
            "border-[#bbe1ed] dark:border-[#326c7f]",
            "border-[#f4d9a4] dark:border-[#896110]",
            "border-[#f1b7c1] dark:border-[#842e3c]",
            "border-[#eeeeee] dark:border-[#616161]",
            "border-[#9e9e9e] dark:border-surface-dark",
          ];
      
          function* colorGenerator(i, colors) {
            while (true) {
              yield colors[i];
      
              i++;
      
              if (i > colors.length - 1) {
                i = 0;
              }
            }
          }
      
          const colorIterator = colorGenerator(0, colors);
          const borderIterator = colorGenerator(0, borderColors);
      
          document
            .getElementById("stacking-trigger-example")
            .addEventListener("click", () => {
              toastCount++;
              const color = colorIterator.next().value.split(" ");
              const borderColor = borderIterator.next().value.split(" ");
              const toast = document.createElement("div");
              toast.classList.add(
                "rounded-lg",
                "pointer-events-auto",
                "mx-auto",
                "rounded-lg",
                "bg-clip-padding",
                "text-sm",
                "shadow-lg",
                "data-[twe-toast-show]:block",
                "data-[twe-toast-hide]:hidden",
                ...color
              );
              toast.setAttribute("data-twe-toast-init", "");
              toast.innerHTML = `
                      <div
                        id="inner-toast"
                        class="flex items-center justify-between rounded-t-lg border-b-2 bg-clip-padding px-4 py-[0.65rem] "> 
                        <p class="font-bold">${toastCount}</p>
                        <div class="flex items-center">
                          <p class="text-xs">11 mins ago</p>
                          <button
                            type="button"
                            class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                            data-twe-toast-dismiss
                            aria-label="Close">
                            <span
                              class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke-width="1.5"
                                stroke="currentColor">
                                <path
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M6 18 18 6M6 6l12 12" />
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div class="break-words rounded-b-lg p-4 text-center">
                        Hello, world! This is a toast message.
                      </div>
                  `;
    
              const innerToast = toast.querySelector("#inner-toast");
              innerToast.classList.add(...borderColor);
              document.body.appendChild(toast);
      
              const toastInstance = new Toast(toast, {
                stacking: true,
                hidden: true,
                width: "450px",
                position: "top-right",
                autohide: true,
                delay: 5000,
              });
      
              toastInstance.show();
            });
          
            
        
            
                
          let toastCount = 0;
          const colors = [
            "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
            "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
            "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
            "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
            "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
            "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
            "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
            "bg-[#202124] text-zinc-100 dark:text-zinc-100",
          ];
      
          const borderColors = [
            "border-[#b1c6ea] dark:border-[#234479]",
            "border-[#d9dbe0] dark:border-[#5f646b]",
            "border-[#a1dbb8] dark:border-[#0c622e]",
            "border-[#bbe1ed] dark:border-[#326c7f]",
            "border-[#f4d9a4] dark:border-[#896110]",
            "border-[#f1b7c1] dark:border-[#842e3c]",
            "border-[#eeeeee] dark:border-[#616161]",
            "border-[#9e9e9e] dark:border-surface-dark",
          ];
      
          function* colorGenerator(i, colors) {
            while (true) {
              yield colors[i];
      
              i++;
      
              if (i > colors.length - 1) {
                i = 0;
              }
            }
          }
      
          const colorIterator = colorGenerator(0, colors);
          const borderIterator = colorGenerator(0, borderColors);
      
          document
            .getElementById("stacking-trigger-example")
            .addEventListener("click", () => {
              toastCount++;
              const color = colorIterator.next().value.split(" ");
              const borderColor = borderIterator.next().value.split(" ");
              const toast = document.createElement("div");
              toast.classList.add(
                "rounded-lg",
                "pointer-events-auto",
                "mx-auto",
                "rounded-lg",
                "bg-clip-padding",
                "text-sm",
                "shadow-lg",
                "data-[twe-toast-show]:block",
                "data-[twe-toast-hide]:hidden",
                ...color
              );
              toast.setAttribute("data-twe-toast-init", "");
              toast.innerHTML = `
                      <div
                        id="inner-toast"
                        class="flex items-center justify-between rounded-t-lg border-b-2 bg-clip-padding px-4 py-[0.65rem] "> 
                        <p class="font-bold">${toastCount}</p>
                        <div class="flex items-center">
                          <p class="text-xs">11 mins ago</p>
                          <button
                            type="button"
                            class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                            data-twe-toast-dismiss
                            aria-label="Close">
                            <span
                              class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke-width="1.5"
                                stroke="currentColor">
                                <path
                                  stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M6 18 18 6M6 6l12 12" />
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div class="break-words rounded-b-lg p-4 text-center">
                        Hello, world! This is a toast message.
                      </div>
                  `;
    
              const innerToast = toast.querySelector("#inner-toast");
              innerToast.classList.add(...borderColor);
              document.body.appendChild(toast);
      
              const toastInstance = new twe.Toast(toast, {
                stacking: true,
                hidden: true,
                width: "450px",
                position: "top-right",
                autohide: true,
                delay: 5000,
              });
      
              toastInstance.show();
            });
          
            
        

    Stacking (container)

    You can turn on/off stacking your notifications using data-twe-stacking attribute or update() method.

    • HTML
    • javascript
    • umd
            
                
          <button
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            id="stacking-container-trigger-example">
            Show notification
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Toast,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Toast });
    
          let toastCount = 0;
    
          const colors = [
            "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
            "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
            "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
            "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
            "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
            "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
            "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
            "bg-[#202124] text-zinc-100 dark:text-zinc-100",
          ];
    
          const borderColors = [
            "border-[#b1c6ea] dark:border-[#234479]",
            "border-[#d9dbe0] dark:border-[#5f646b]",
            "border-[#a1dbb8] dark:border-[#0c622e]",
            "border-[#bbe1ed] dark:border-[#326c7f]",
            "border-[#f4d9a4] dark:border-[#896110]",
            "border-[#f1b7c1] dark:border-[#842e3c]",
            "border-[#eeeeee] dark:border-[#616161]",
            "border-[#9e9e9e] dark:border-surface-dark",
          ];
    
          function* colorGenerator(i, colors) {
            while (true) {
              yield colors[i];
    
              i++;
    
              if (i > colors.length - 1) {
                i = 0;
              }
            }
          }
    
          const colorIterator = colorGenerator(0, colors);
          const borderIterator = colorGenerator(0, borderColors);
    
          document
            .getElementById("stacking-container-trigger-example")
            .addEventListener("click", () => {
              toastCount++;
              const color = colorIterator.next().value.split(" ");
              const borderColor = borderIterator.next().value.split(" ");
              const container = document.getElementById(
                "parent-stacking-container-example"
              );
    
              const toast = document.createElement("div");
              toast.classList.add(
                "rounded-lg",
                "pointer-events-auto",
                "mx-auto",
                "rounded-lg",
                "bg-clip-padding",
                "text-sm",
                "shadow-lg",
                "data-[twe-toast-show]:block",
                "data-[twe-toast-hide]:hidden",
                ...color
              );
              toast.setAttribute("data-twe-toast-init", "");
              toast.innerHTML = `
                  <div
                    id="inner-toast"
                    class="flex items-center justify-between rounded-t-lg border-b-2 bg-clip-padding px-4 py-[0.65rem] "> 
                    <p class="font-bold">${toastCount}</p>
                    <div class="flex items-center">
                      <p class="text-xs">11 mins ago</p>
                      <button
                        type="button"
                        class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                        data-twe-toast-dismiss
                        aria-label="Close">
                        <span
                          class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor">
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M6 18 18 6M6 6l12 12" />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="break-words rounded-b-lg p-4 text-center">
                    Hello, world! This is a toast message.
                  </div>
              `;
    
              const innerToast = toast.querySelector("#inner-toast");
              innerToast.classList.add(...borderColor);
    
              container.appendChild(toast);
    
              const toastInstance = new Toast(toast, {
                container: "#parent-stacking-container-example",
                stacking: true,
                width: "250px",
                position: "top-right",
                autohide: true,
                delay: 5000,
              });
    
              toastInstance.show();
            });
          
            
        
            
                
          let toastCount = 0;
    
          const colors = [
            "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
            "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
            "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
            "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
            "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
            "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
            "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
            "bg-[#202124] text-zinc-100 dark:text-zinc-100",
          ];
    
          const borderColors = [
            "border-[#b1c6ea] dark:border-[#234479]",
            "border-[#d9dbe0] dark:border-[#5f646b]",
            "border-[#a1dbb8] dark:border-[#0c622e]",
            "border-[#bbe1ed] dark:border-[#326c7f]",
            "border-[#f4d9a4] dark:border-[#896110]",
            "border-[#f1b7c1] dark:border-[#842e3c]",
            "border-[#eeeeee] dark:border-[#616161]",
            "border-[#9e9e9e] dark:border-surface-dark",
          ];
    
          function* colorGenerator(i, colors) {
            while (true) {
              yield colors[i];
    
              i++;
    
              if (i > colors.length - 1) {
                i = 0;
              }
            }
          }
    
          const colorIterator = colorGenerator(0, colors);
          const borderIterator = colorGenerator(0, borderColors);
    
          document
            .getElementById("stacking-container-trigger-example")
            .addEventListener("click", () => {
              toastCount++;
              const color = colorIterator.next().value.split(" ");
              const borderColor = borderIterator.next().value.split(" ");
              const container = document.getElementById(
                "parent-stacking-container-example"
              );
    
              const toast = document.createElement("div");
              toast.classList.add(
                "rounded-lg",
                "pointer-events-auto",
                "mx-auto",
                "rounded-lg",
                "bg-clip-padding",
                "text-sm",
                "shadow-lg",
                "data-[twe-toast-show]:block",
                "data-[twe-toast-hide]:hidden",
                ...color
              );
              toast.setAttribute("data-twe-toast-init", "");
              toast.innerHTML = `
    
                  <div
                    id="inner-toast"
                    class="flex items-center justify-between rounded-t-lg border-b-2 bg-clip-padding px-4 py-[0.65rem] "> 
                    <p class="font-bold">${toastCount}</p>
                    <div class="flex items-center">
                      <p class="text-xs">11 mins ago</p>
                      <button
                        type="button"
                        class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
                        data-twe-toast-dismiss
                        aria-label="Close">
                        <span
                          class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor">
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="M6 18 18 6M6 6l12 12" />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="break-words rounded-b-lg p-4 text-center">
                    Hello, world! This is a toast message.
                  </div>
              `;
    
              const innerToast = toast.querySelector("#inner-toast");
              innerToast.classList.add(...borderColor);
    
              container.appendChild(toast);
    
              const toastInstance = new twe.Toast(toast, {
                container: "#parent-stacking-container-example",
                stacking: true,
                width: "250px",
                position: "top-right",
                autohide: true,
                delay: 5000,
              });
    
              toastInstance.show();
            });
          
            
        

    Related resources

    Tutorials:

    colors icons dark mode text spacing utility first buttons rounded corners shadows sizing

    Extended Docs:

    colors headings icons typography alerts badges chips notifications popover tooltip search select box sizing colors display flex float right icons letter spacing overflow position spacing text bold text color text size visibility hidden z index

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction size matters label overload lowering contrast low contrast vs low aesthetics beyond borders let it breathe do not start with the roof project personality design system plan the process principles tips and tricks
    • Basic example
    • Static example
    • Color examples
    • Placement
    • Offset
    • Container
    • Stacking
    • Stacking (container)
    • Related resources

    Toasts - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Toast, initTWE } from "tw-elements";
            initTWE({ Toast });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Elements with the data-twe-toast-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <div class="flex justify-center space-x-2">
              <div
                class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-white bg-clip-padding text-sm shadow-lg data-[twe-toast-show]:block data-[twe-toast-hide]:hidden dark:bg-zinc-600"
                id="static-example"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-twe-toast-init
                data-twe-toast-show>
                <div
                  class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-white bg-clip-padding px-3 py-2 dark:border-gray-500 dark:bg-zinc-600">
                  <p class="font-bold text-gray-500 dark:text-gray-200">
                    MDBootstrap
                  </p>
                  <div class="flex items-center">
                    <p class="text-xs text-gray-600 dark:text-gray-300">
                      11 mins ago
                    </p>
                    <button
                      type="button"
                      class="ms-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
                      data-twe-toast-dismiss
                      aria-label="Close">
                      <span
                        class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                        <svg
                          class="w-[1em]"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 16 16"
                          fill="currentColor">
                          <path
                            d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z" />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
                <div
                  class="break-words rounded-b-lg bg-white px-3 py-2.5 text-gray-700 dark:bg-zinc-600 dark:text-gray-300">
                  Static Example
                </div>
              </div>
            </div>
            
            
        
    Dismiss

    Dismissal can be achieved with data attributes on a button within the toast as demonstrated below:

    • HTML
            
                
                <button
                  type="button"
                  class="ms-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
                  data-twe-toast-dismiss
                  aria-label="Close"></button>
                
            
        

    or on a button outside the toast using the data-twe-target as demonstrated below:

    • HTML
            
                
                  <button
                    type="button"
                    class="ms-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
                    data-twe-toast-dismiss
                    data-twe-target="#myToast"
                    aria-label="Close"></button>
                  
            
        

    Via JavaScript

    You can access an instance from your Javascript code, by using the getInstance static method of the Toast class - it allows making use of all the public methods listed in the Methods section.

    • javascript
    • umd
            
                
            Toast.getInstance(document.getElementById('myToast')).update({
              position: ..., 
              offset: ..., 
              container: ..., 
            });
            
            
        
            
                
            twe.Toast.getInstance(document.getElementById('myToast')).update({
              position: ..., 
              offset: ..., 
              container: ..., 
            });
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-position="".

    Name Type Default Description
    width String / null null Defines the width of a toast.
    position String 'top-left' Changes position of toast.
    offset Number '10' Changes offset of toast.
    container String - Defines id/class of the parent element.
    autohide Boolean true Toasts will hide automatically or not.
    animation Boolean true Toasts will be animated or not.
    delay Number 500 Sets length of animation delay.
    appendToBody Boolean false Appends element to the end of body.
    stacking Boolean true Enables stacking notifications.

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-fadeIn="animate-[fade-in_0.5s_both]".

    Name Default Description
    fadeIn animate-[fade-in_0.3s_both] p-[auto] motion-reduce:transition-none motion-reduce:animate-none Sets fadeIn animation styles.
    fadeOut animate-[fade-out_0.3s_both] p-[auto] motion-reduce:transition-none motion-reduce:animate-none Sets fadeOut animation styles.

    Methods

    Method Description Example
    show Shows toast. myToast.show()
    hide Hides toast. myToast.hide()
    dispose Removes an Toast instance myToast.dispose()
    getInstance Static method which allows you to get the alert instance associated to a DOM element. Toast.getInstance()
    getOrCreateInstance Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. Toast.getOrCreateInstance()
    update Updates options of an Toast instance. myToast.update({position: 'top-center'})
    • javascript
    • umd
            
                
            Toast.getInstance(document.getElementById('myToast')).show();
            
            
        
            
                
            twe.Toast.getInstance(document.getElementById('myToast')).show();
            
            
        

    Events

    Event type Description
    show.twe.toast Emitted when a toast has been toggled.
    shown.twe.toast Emitted once toast is shown.
    hide.twe.toast Emitted when a toast has been toggled.
    hidden.twe.toast Emitted once toast is hidden.
    • JavaScript
            
                
            const myToastEl = document.getElementById('myToast')
            myToastEl.addEventListener('hidden.twe.toast', () => {
              // do something...
            });
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO