badgesbeginner

Pill Badge

Rounded badge for tags, status indicators, and labels.

Preview

New Feature Active Urgent

Tailwind Classes

inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800

CSS Code

.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
}

HTML Example

<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
  New Feature
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
  Active
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
  Urgent
</span>

Use Cases

TagsStatus indicatorsCategoriesLabels

Browser Support

All modern browsers

#badge#pill#tag#status