Badge v0.10.0+ HelixUI v0.10.0 or later required

Badges are inline elements that communicate change to an area of the site. They are implemented by applying the .hxBadge CSS class to a <span> element.

Badges may be used with a hyperlink to bring attention to new items at the destination. 

<a href="">
  Link
  <span class="hxBadge">1</span>
</a>

Icon Badge

Badges can be combined with icons to create a compact notification.

1 2 32 99+ 
<hx-icon type="bell"></hx-icon>
<span class="hxBadge"></span>

<hx-icon type="bell"></hx-icon>
<span class="hxBadge">1</span>

<hx-icon type="bell"></hx-icon>
<span class="hxBadge">2</span>

<hx-icon type="bell"></hx-icon>
<span class="hxBadge">32</span>

<hx-icon type="bell"></hx-icon>
<span class="hxBadge">99+</span>

Tab Badge

Badges may be used in tabs to bring attention to new items in unselected tabs.

First 1 Second 32 Third 99+ Tab 1 Tab 2 Tab 3 
<hx-tabset>
  <hx-tablist>
    <hx-tab>
      <span>First</span>
      <span class="hxBadge">1</span>
    </hx-tab>
    <hx-tab>
      <span>Second</span>
      <span class="hxBadge">32</span>
    </hx-tab>
    <hx-tab>
      <span>Third</span>
      <span class="hxBadge">99+</span>
    </hx-tab>
  </hx-tablist>
  <hx-tabcontent>
    <hx-tabpanel>Tab 1</hx-tabpanel>
    <hx-tabpanel>Tab 2</hx-tabpanel>
    <hx-tabpanel>Tab 3</hx-tabpanel>
  </hx-tabcontent>
</hx-tabset>

See Also