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.

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>

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>

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>

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>

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>

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>

Related components

View all application components