Badges

Badges are being used to display the status information or the notification count.

Text with a Badge

Add notification badges for your text by using badge class. Have a look at the demo & the code reference below.

        
  <span class="badge">
    Alerts
    <span class="badge-content badge-small badge-right badge-warning"
      >4</span
    >
  </span>
        
      

Text with large badge

Add large notification badges for your text by using badge-large class. Have a look at the demo & the code reference below.

        
  <span class="badge">
    Alerts
    <span class="badge-content badge-large badge-right badge-violet"
      >4</span
    >
  </span>
        
      

Add large notification badges on the top-left of your text by using badge-left class. Have a look at the demo & the code reference below.

        
  <span class="badge">
    Alerts
    <span class="badge-content badge-large badge-left badge-success"
      >4</span
    >
  </span>
        
      

Button with a Badge

Add notification badges to your buttons by using badge-button class. Have a look at the demo & the code reference below.

        
  <button class="badge badge-button">
    Action
    <span class="badge-content badge-small badge-left badge-error"
      >8</span
    >
  </button>
  <button class="badge btn btn-solid-primary">
    Action
    <span class="badge-content badge-small badge-left badge-error"
      >8</span
    >
  </button>
        
      

Icon with a Badge

Add notification badges for your icons by using badge-icon class. Have a look at the demo & the code reference below.

        
  <span class="badge badge-icon"
    ><span class="material-icons"> home</span>
    <span class="badge-content badge-small badge-blue badge-right"
      >5</span
    ></span
  >
        
      

Badges on Avatars

Add status badges for your avatars by using badge-avatar class. Have a look at the demo & the code reference below.

        
  <span class="badge badge-avatar">
    <img
      class="avatar-round avatar-lg"
      src="../../assets/avatarOne.png"
      alt="avatar"
    />
    <span class="badge-content status-lg status-online"></span>
  </span>
  <span class="badge badge-avatar">
    <img
      class="avatar-round avatar-md"
      src="../../assets/avatarTwo.png"
      alt="avatar"
    />
    <span class="badge-content status-md status-idle"></span>
  </span>

  <span class="badge badge-avatar">
    <img
      class="avatar-round avatar-sm"
      src="../../assets/avatarThree.png"
      alt="avatar"
    />
    <span class="badge-content status-sm status-offline"></span>
  </span>

  <span class="badge badge-avatar">
    <img
      class="avatar-round avatar-xs"
      src="../../assets/avatarFour.png"
      alt="avatar"
    />
    <span class="badge-content status-xs status-dnd"></span>
  </span>