Skip to content
HyperUI

No results found.

Back to application components

Toasts

Toast notification components for displaying temporary feedback messages including success, error, warning, and info states with customizable positioning.

6/6 Dark Mode Updated: Jul 4, 2026

Success

markmead

<div role="alert" class="rounded-md border border-green-500 bg-green-50 p-4 shadow-sm">
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-green-700"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-green-800"> Success </strong>

      <p class="mt-0.5 text-sm text-green-700">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Success (Dark)

markmead

<div
  role="alert"
  class="rounded-md border border-green-500 bg-green-50 p-4 shadow-sm dark:border-green-400 dark:bg-green-800"
>
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-green-700 dark:text-green-200"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-green-800 dark:text-green-100">
        Success
      </strong>

      <p class="mt-0.5 text-sm text-green-700 dark:text-green-200">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Error

markmead

<div role="alert" class="rounded-md border border-red-500 bg-red-50 p-4 shadow-sm">
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-red-700"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-red-800"> Error </strong>

      <p class="mt-0.5 text-sm text-red-700">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Error (Dark)

markmead

<div
  role="alert"
  class="rounded-md border border-red-500 bg-red-50 p-4 shadow-sm dark:border-red-400 dark:bg-red-800"
>
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-red-700 dark:text-red-200"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-red-800 dark:text-red-100">
        Error
      </strong>

      <p class="mt-0.5 text-sm text-red-700 dark:text-red-200">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Warning

markmead

<div role="alert" class="rounded-md border border-amber-500 bg-amber-50 p-4 shadow-sm">
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-amber-700"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-amber-800"> Warning </strong>

      <p class="mt-0.5 text-sm text-amber-700">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Warning (Dark)

markmead

<div
  role="alert"
  class="rounded-md border border-amber-500 bg-amber-50 p-4 shadow-sm dark:border-amber-400 dark:bg-amber-800"
>
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-amber-700 dark:text-amber-200"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-amber-800 dark:text-amber-100">
        Warning
      </strong>

      <p class="mt-0.5 text-sm text-amber-700 dark:text-amber-200">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Info

markmead

<div role="alert" class="rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm">
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-blue-700"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-blue-800"> Info </strong>

      <p class="mt-0.5 text-sm text-blue-700">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

Info (Dark)

markmead

<div
  role="alert"
  class="rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800"
>
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-blue-700 dark:text-blue-200"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-blue-800 dark:text-blue-100">
        Info
      </strong>

      <p class="mt-0.5 text-sm text-blue-700 dark:text-blue-200">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>
    </div>
  </div>
</div>

With action button

markmead

<div role="alert" class="rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm">
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-blue-700"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-blue-800"> Info </strong>

      <p class="mt-0.5 text-sm text-blue-700">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>

      <button
        class="mt-2 inline-block rounded-sm border border-blue-600 bg-blue-600 px-4 py-2 text-sm/none font-medium text-white hover:bg-transparent hover:text-blue-600"
        type="button"
      >
        Accept
      </button>
    </div>
  </div>
</div>

With action button (Dark)

markmead

<div
  role="alert"
  class="rounded-md border border-blue-500 bg-blue-50 p-4 shadow-sm dark:border-blue-400 dark:bg-blue-800"
>
  <div class="flex items-start gap-4">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="-mt-0.5 size-6 text-blue-700 dark:text-blue-200"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <div class="flex-1">
      <strong class="block leading-tight font-medium text-blue-800 dark:text-blue-100">
        Info
      </strong>

      <p class="mt-0.5 text-sm text-blue-700 dark:text-blue-200">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
      </p>

      <button
        class="mt-2 inline-block rounded-sm border border-blue-600 bg-blue-600 px-4 py-2 text-sm/none font-medium text-white hover:bg-transparent hover:text-blue-600 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:text-white"
        type="button"
      >
        Accept
      </button>
    </div>
  </div>
</div>

Standout

markmead

<div role="alert" class="border-s-4 border-blue-700 bg-blue-50 p-4">
  <div class="flex items-center gap-2 text-blue-700">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <strong class="block leading-tight font-medium text-blue-800"> Info </strong>
  </div>

  <p class="mt-1 text-sm text-blue-700">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
  </p>
</div>

Standout (Dark)

WinnyChang

<div
  role="alert"
  class="border-s-4 border-blue-700 bg-blue-50 p-4 dark:border-blue-600 dark:bg-blue-800"
>
  <div class="flex items-center gap-2 text-blue-700 dark:text-blue-200">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
      />
    </svg>

    <strong class="block leading-tight font-medium text-blue-800 dark:text-blue-100">
      Info
    </strong>
  </div>

  <p class="mt-1 text-sm text-blue-700 dark:text-blue-200">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
  </p>
</div>

Related components

View all application components