Badges designs

A collection of sleek, versatile information badges to display status, labels, and important information on your website or application.

This Example is contributed by Alexandra Sinclair, on 01-Mar-2025. It is responsive.

Badge Label

Author Alexandra Sinclair

Fork Fullscreen

<div class="container">
  <h2>Information Badges</h2>
  
  <div class="badge-section">
    <h3>Basic Badges</h3>
    <div class="badge-row">
      <span class="badge badge-primary">Primary</span>
      <span class="badge badge-secondary">Secondary</span>
      <span class="badge badge-success">Success</span>
      <span class="badge badge-danger">Danger</span>
      <span class="badge badge-warning">Warning</span>
      <span class="badge badge-info">Info</span>
    </div>
  </div>
  
  <div class="badge-section">
    <h3>Rounded Badges</h3>
    <div class="badge-row">
      <span class="badge badge-rounded badge-primary">Primary</span>
      <span class="badge badge-rounded badge-secondary">Secondary</span>
      <span class="badge badge-rounded badge-success">Success</span>
      <span class="badge badge-rounded badge-danger">Danger</span>
      <span class="badge badge-rounded badge-warning">Warning</span>
      <span class="badge badge-rounded badge-info">Info</span>
    </div>
  </div>
  
  <div class="badge-section">
    <h3>Outline Badges</h3>
    <div class="badge-row">
      <span class="badge badge-outline badge-primary">Primary</span>
      <span class="badge badge-outline badge-secondary">Secondary</span>
      <span class="badge badge-outline badge-success">Success</span>
      <span class="badge badge-outline badge-danger">Danger</span>
      <span class="badge badge-outline badge-warning">Warning</span>
      <span class="badge badge-outline badge-info">Info</span>
    </div>
  </div>
  
  <div class="badge-section">
    <h3>Status Badges</h3>
    <div class="badge-row">
      <span class="badge badge-status badge-success">Active</span>
      <span class="badge badge-status badge-warning">Pending</span>
      <span class="badge badge-status badge-danger">Failed</span>
      <span class="badge badge-status badge-info">Processing</span>
      <span class="badge badge-status badge-secondary">Inactive</span>
    </div>
  </div>
  
  <div class="badge-section">
    <h3>With Icons</h3>
    <div class="badge-row">
      <span class="badge badge-with-icon badge-success"><i class="icon-check"></i> Approved</span>
      <span class="badge badge-with-icon badge-danger"><i class="icon-close"></i> Rejected</span>
      <span class="badge badge-with-icon badge-warning"><i class="icon-clock"></i> Pending</span>
      <span class="badge badge-with-icon badge-info"><i class="icon-info"></i> Info</span>
    </div>
  </div>
</div>

Related Examples

Information Chips with Custom Icons
A collection of sleek information chips with integrated icons that provide visual context for different types of notifications or statuses.

Author:
Julian Parker

1 month ago
Button Collection

Author:
Anonymous

1 month ago
Status Alert Component with CSS
A collection of clean, responsive alert components with success, error, warning, and info variants for web applications.

Author:
Alex Morgan

1 month ago
CSS Button Collection

Author:
Anonymous

1 month ago
Glassmorphism Alert Component with Notification Icons
A glass-effect alert card with status icons that displays notifications in a modern transparent style, perfect for dashboards and admin panels.

Author:
Liam Reynolds

4 weeks ago
Button Variants

Author:
Anonymous

1 month ago
Standard Button designs

Author:
Anonymous

1 month ago
Dismissible Alerts

Author:
M. Johnson

2 months ago
Modern Info Cards with Hover Effects
A set of clean, modern information cards with smooth hover effects to showcase your content in an engaging way.

Author:
Julian Parker

1 month ago
Customizable Toast Alert Component for Websites
A versatile toast notification component that displays temporary messages to users with various styling options including success, error, and warning alerts.

Author:
Anonymous

4 weeks ago
Feature Showcase Grid with Icons
A responsive features showcase grid displaying your product's key capabilities with animated icons and clean descriptions.

Author:
Mert Yılmaz

1 month ago
Closable Toast Notifications
A lightweight toast notification system that displays messages in the bottom-right corner of the screen with smooth animations and a close button for user dismissal.

Author:
Anika

1 month ago

Didn't find component you were looking for?

Search from 500+ components