p Badges are often used as unread number indicators.

.docs-demo.columns
  .column.col-3.col-xs-6
    span.badge(data-badge="")
      | Notifications
  .column.col-3.col-xs-6
    span.badge(data-badge="8")
      | Notifications
  .column.col-3.col-xs-6
    span.badge(data-badge="88")
      | Notifications
  .column.col-3.col-xs-6
    span.badge(data-badge="888")
      | Notifications

p
  | Add the #[code badge] class to non self closing elements.
  | And add the #[code data-badge] attribute to define the content of a badge.
  | The badge will appear in the top-right direction of the element.
p
  | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.

.docs-demo.columns
  .column.col-sm-12
    button.btn.badge(data-badge="") Button
    button.btn.badge(data-badge="8") Button
  .column.col-sm-12
    button.btn.btn-primary.badge(data-badge="") Button
    button.btn.btn-primary.badge(data-badge="8") Button
  .column.col-sm-12
    figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
      img(src="img/avatar-1.png" alt="YZ")
    figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
      img(src="img/avatar-2.png" alt="YZ")
    figure.avatar.badge(data-badge="8" data-initial="YZ")
      img(src="img/avatar-3.png" alt="YZ")

p
  | Badges support #[code button] and #[code avatars] elements as well.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <span class="badge">
        Notifications
      </span>

      <span class="badge" data-badge="8">
        Notifications
      </span>

      <button class="btn badge" data-badge="8">
        Button
      </button>

      <figure class="avatar badge" data-badge="8" data-initial="YZ">
        <img src="img/avatar-3.png" alt="YZ">
      </figure>