Please wait...

Badges

  1. Home
  2. Basic UI

Default Badge

Add contextual class badge-default
1 10 100

Primary Badge

Add contextual class badge-primary
1 10 100

Success Badge

Add contextual class badge-success
1 10 100

Info Badge

Add contextual class badge-info
1 10 100

Danger Badge

Add contextual class badge-danger
1 10 100

Warning Badge

Add contextual class badge-warning
1 10 100

Default Outline Badge

Add contextual class badge-outline-default
1 10 100

Primary Outline Badge

Add contextual class badge-outline-primary
1 10 100

Success Outline Badge

Add contextual class badge-outline-success
1 10 100

Info Outline Badge

Add contextual class badge-outline-info
1 10 100

Danger Outline Badge

Add contextual class badge-outline-danger
1 10 100

Warning Outline Badge

Add contextual class badge-outline-warning
1 10 100

Badges Radius

Building on any radius style badges by adding an optional .badge-radius.
1 2 3 4 5 6

Badges Sizes

Add additional class .badge-lg or .badge-sm.
Large Default Small

Above Another Element

Highlight unread items by simply add .badge-above class.
notifications 1 flag 2 email 3 chat 4 notifications_none 1 event_note 2 wifi 3 group 4

Badges With Material Colors

Add one of the material colors classes ( e.g. .bg-red, bg-green ) with basic .badge class. Choose from bg-red, bg-pink, bg-blue, etc.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Badges With Buttons

Simply use class .badge.

Badges With List

Simply use class .badge.
  • 10 Messages
  • 10+ Notification
  • 15 Upcoming Event
  • 15+ Pending Tasks