Skip to main content

Badges 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+ ... ... ...
<hx-tabset>
  <hx-tablist>
    <hx-tab>
      First
      <span class="hxBadge">1</span>
    </hx-tab>
    <hx-tab>
      Second
      <span class="hxBadge">32</span>
    </hx-tab>
    <hx-tab>
      Third
      <span class="hxBadge">99+</span>
    </hx-tab>
  </hx-tablist>
  <hx-tabcontent>
    <hx-tabpanel>...</hx-tabpanel>
    <hx-tabpanel>...</hx-tabpanel>
    <hx-tabpanel>...</hx-tabpanel>
  </hx-tabcontent>
</hx-tabset>

See Also