Badge Text

Style Presets

Shape

Size

Icon

Colors

Typography

500

Options

Show Border
Uppercase
Drop Shadow
Removable (X)
Hover Animation

Live Preview

Badge

Example Variations

NewSold Out20% OffFeaturedPro
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  color: #ffffff;
  white-space: nowrap;
  background-color: #3b82f6;
}

.badge-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

Common Use Cases

Status Indicators

ActivePendingInactive

E-commerce Labels

SaleNewSold Out

User Roles

AdminModeratorMember

Notifications

599+New

Best Practices

Accessibility

  • Ensure sufficient color contrast (4.5:1 ratio minimum)
  • Don't rely on color alone to convey meaning
  • Use semantic HTML (<span> or <span role="status">)
  • Add aria-label for icon-only badges

Design Guidelines

  • Keep text concise (1-3 words ideal)
  • Use consistent sizing within the same context
  • Match badge colors to your brand palette
  • Consider using icons for quick recognition

Color Conventions

  • Green: Success, active, available, new
  • Red: Error, danger, sold out, alert
  • Yellow/Orange: Warning, pending, limited
  • Blue: Info, neutral, featured

Usage Tips

  • Position badges consistently (top-right for notifications)
  • Avoid using too many badges on one page
  • Use animations sparingly for important updates
  • Make removable badges keyboard accessible

Need Custom Badge Designs?

Let our experts create a cohesive badge system that matches your brand and enhances user experience.

Get Custom DesignView Services