Skip to content
HyperUI

No results found.

Back to neobrutalism components

Badges

Neobrutalism-style badge components built with Tailwind CSS. Featuring thick borders, hard shadows, and bold typography. Ideal for labeling content, status indicators, and tags with a distinct, retro aesthetic.

3/3 Dark Mode Updated: Jul 4, 2026

Base

markmead

<span
  class="border-2 border-black bg-blue-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  Info
</span>

<span
  class="border-2 border-black bg-green-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  Success
</span>

<span
  class="border-2 border-black bg-red-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  Error
</span>

Base (Dark)

markmead

<span
  class="border-2 border-black bg-blue-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-blue-800 dark:text-white dark:shadow-white"
>
  Info
</span>

<span
  class="border-2 border-black bg-green-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-green-800 dark:text-white dark:shadow-white"
>
  Success
</span>

<span
  class="border-2 border-black bg-red-100 px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-red-800 dark:text-white dark:shadow-white"
>
  Error
</span>

Base with status

markmead

<span
  class="inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  <span class="size-2 bg-green-600"></span>

  Success
</span>

<span
  class="inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  <span class="size-2 bg-red-600"></span>

  Error
</span>

Base with status (Dark)

markmead

<span
  class="inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white"
>
  <span class="size-2 bg-green-600 dark:bg-green-300"></span>

  Success
</span>

<span
  class="inline-flex items-center gap-1.5 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white"
>
  <span class="size-2 bg-red-600 dark:bg-red-300"></span>

  Error
</span>

Base with dismiss

markmead

<span
  class="inline-flex items-center gap-3 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black"
>
  New Message

  <button
    type="button"
    class="bg-black p-0.5 text-white shadow-[2px_2px_0_0] shadow-black hover:translate-0.5 hover:shadow-none focus:ring-2 focus:ring-yellow-300"
    aria-label="Remove"
  >
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      fill="currentColor"
      class="size-4"
    >
      <path
        d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
      />
    </svg>
  </button>
</span>

Base with dismiss (Dark)

markmead

<span
  class="inline-flex items-center gap-3 border-2 border-black bg-white px-3 py-1.5 text-sm/none font-semibold text-black shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white"
>
  New Message

  <button
    type="button"
    class="bg-black p-0.5 text-white shadow-[2px_2px_0_0] shadow-black hover:translate-0.5 hover:shadow-none focus:ring-2 focus:ring-yellow-300 dark:bg-white dark:text-gray-900 dark:shadow-white dark:focus:ring-yellow-600"
    aria-label="Remove"
  >
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      fill="currentColor"
      class="size-4"
    >
      <path
        d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
      />
    </svg>
  </button>
</span>

Related components

View all neobrutalism components