Badge Rails Components

Badges are used to highlight items and draw attention to them. They can be used to indicate a new feature, a promotion, a warning, or as a list of tags for example.

Examples

Basic Badge

A basic badge with a label.

Badge Badge Badge Badge Badge Badge Badge Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

Pill Badge

A pill badge with a label.

Badge Badge Badge Badge Badge Badge Badge Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">Badge</span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">Badge</span>
</div>

Basic Badge with Remove button

A basic badge with a label and a remove button.

Badge Badge Badge Badge Badge Badge Badge Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded bg-neutral-100 p-0.5 text-xs font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded bg-red-100 p-0.5 text-xs font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded bg-orange-100 p-0.5 text-xs font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded bg-yellow-100 p-0.5 text-xs font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded bg-green-100 p-0.5 text-xs font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded bg-blue-100 p-0.5 text-xs font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded bg-purple-100 p-0.5 text-xs font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded bg-pink-100 p-0.5 text-xs font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

Pill Badge with Remove button

A pill badge with a label and a remove button.

Badge Badge Badge Badge Badge Badge Badge Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <button class="rounded-full bg-neutral-100 p-0.5 text-xs font-medium text-neutral-600 outline outline-neutral-500/20 hover:bg-neutral-200 dark:bg-neutral-400/10 dark:text-neutral-400 hover:dark:bg-neutral-400/20 dark:outline-neutral-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <button class="rounded-full bg-red-100 p-0.5 text-xs font-medium text-red-600 outline outline-red-500/20 hover:bg-red-200 dark:bg-red-400/10 dark:text-red-400 hover:dark:bg-red-400/20 dark:outline-red-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <button class="rounded-full bg-orange-100 p-0.5 text-xs font-medium text-orange-600 outline outline-orange-500/20 hover:bg-orange-200 dark:bg-orange-400/10 dark:text-orange-400 hover:dark:bg-orange-400/20 dark:outline-orange-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <button class="rounded-full bg-yellow-100 p-0.5 text-xs font-medium text-yellow-600 outline outline-yellow-500/20 hover:bg-yellow-200 dark:bg-yellow-400/10 dark:text-yellow-400 hover:dark:bg-yellow-400/20 dark:outline-yellow-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <button class="rounded-full bg-green-100 p-0.5 text-xs font-medium text-green-600 outline outline-green-500/20 hover:bg-green-200 dark:bg-green-400/10 dark:text-green-400 hover:dark:bg-green-400/20 dark:outline-green-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <button class="rounded-full bg-blue-100 p-0.5 text-xs font-medium text-blue-600 outline outline-blue-500/20 hover:bg-blue-200 dark:bg-blue-400/10 dark:text-blue-400 hover:dark:bg-blue-400/20 dark:outline-blue-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <button class="rounded-full bg-purple-100 p-0.5 text-xs font-medium text-purple-600 outline outline-purple-500/20 hover:bg-purple-200 dark:bg-purple-400/10 dark:text-purple-400 hover:dark:bg-purple-400/20 dark:outline-purple-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <button class="rounded-full bg-pink-100 p-0.5 text-xs font-medium text-pink-600 outline outline-pink-500/20 hover:bg-pink-200 dark:bg-pink-400/10 dark:text-pink-400 hover:dark:bg-pink-400/20 dark:outline-pink-400/25 focus-visible:outline-neutral-500 focus-visible:dark:outline-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </span>
</div>

Basic Badge with Dot

A basic badge with a label and a dot.

Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-md bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-1 dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-1 dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-1 dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-1 dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-1 dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-1 dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-1 dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-md bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-1 dark:bg-pink-400">
    </div>
  </span>
</div>

Pill Badge with Dot

A pill badge with a label and a dot.

Badge

<div class="flex flex-wrap gap-2 justify-center">
  <span class="inline-flex items-center gap-1 rounded-full bg-neutral-50 pl-2 pr-1.5 py-1 text-xs font-medium text-neutral-700 outline outline-neutral-500/20 dark:bg-neutral-400/10 dark:text-neutral-400 dark:outline-neutral-400/25">
    Badge
    <div class="rounded-full bg-neutral-500 p-1 dark:bg-neutral-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-red-50 pl-2 pr-1.5 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
    Badge
    <div class="rounded-full bg-red-500 p-1 dark:bg-red-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-orange-50 pl-2 pr-1.5 py-1 text-xs font-medium text-orange-700 outline outline-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:outline-orange-400/25">
    Badge
    <div class="rounded-full bg-orange-500 p-1 dark:bg-orange-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 pl-2 pr-1.5 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
    Badge
    <div class="rounded-full bg-yellow-500 p-1 dark:bg-yellow-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-green-50 pl-2 pr-1.5 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
    Badge
    <div class="rounded-full bg-green-500 p-1 dark:bg-green-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 pl-2 pr-1.5 py-1 text-xs font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
    Badge
    <div class="rounded-full bg-blue-500 p-1 dark:bg-blue-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 pl-2 pr-1.5 py-1 text-xs font-medium text-purple-700 outline outline-purple-700/20 dark:bg-purple-400/10 dark:text-purple-400 dark:outline-purple-400/25">
    Badge
    <div class="rounded-full bg-purple-500 p-1 dark:bg-purple-400">
    </div>
  </span>
  <span class="inline-flex items-center gap-1 rounded-full bg-pink-50 pl-2 pr-1.5 py-1 text-xs font-medium text-pink-700 outline outline-pink-700/20 dark:bg-pink-400/10 dark:text-pink-400 dark:outline-pink-400/25">
    Badge
    <div class="rounded-full bg-pink-500 p-1 dark:bg-pink-400">
    </div>
  </span>
</div>

Autogrow

Breadcrumb

Badge Rails Components

Examples

Basic Badge

Pill Badge

Basic Badge with Remove button

Pill Badge with Remove button

Basic Badge with Dot

Pill Badge with Dot

Table of contents

Get notified when new components come out

Thanks for subscribing!