alertsBeginneranimation

Toast — With Action

Toast notification with an inline action button.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a toast notification with Tailwind: icon + message + a small action button (e.g. 'Undo'), and a close X. Slides in from the bottom-right.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/toasts/2.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-toast-2
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="ml-auto max-w-md p-6 w-full">
<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
          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>
  </div>
</div>