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.
<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
<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 });
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.
<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.
<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
<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!
<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.
<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.
<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:
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