Uihub

Appearance

Badges ​

Usage ​

See design usage guidelines

Badges show notifications, counts, or status information on navigation items and icons

Badge ​

Text Badge ​

Badge

html
<span class="badge">Badge</span>

Digit Badge ​

+99

html
<span class="badge">+99</span>

Circle Badge ​

9

html
<span class="badge badge-small">Badge</span>

Use as a notification ​

o-bell+99
html
<span class="badge-container">
    <span class="u-icon u-icon-24 text-grey-normal"></span>
    <span class="badge badge-small" style="--margin-left: -20px; --margin-top: 3px">+99</span>
</span>

Dot Badge Radius ​

o-bello-bello-bell
html
<span class="badge-container">
    <span class="u-icon u-icon-48">o-bell</span>
    <span class="badge badge-circle badge-small" style="--margin-left: -20px; --margin-top: 3px;"></span>
</span>

<span class="badge-container">
    <span class="u-icon u-icon-48">o-bell</span>
    <span class="badge badge-circle" style="--margin-left: -20px;"></span>
</span>

<span class="badge-container">
    <span class="u-icon u-icon-48">o-bell</span>
    <span class="badge badge-circle badge-large" style="--margin-left: -20px;"></span>
</span>

Grey Badge Fill ​

o-bellBadge
html
<span class="badge-container">
    <span class="u-icon u-icon-48">o-bell</span>
    <span class="badge badge-small grey" style="--margin-left: -20px; --margin-top: -3px">Badge</span>
</span>

Primary Badge Fill ​

o-bellBadge
html
<span class="badge-container">
    <span class="u-icon u-icon-48">o-bell</span>
    <span class="badge badge-small primary" style="--margin-left: -20px; --margin-top: -3px">Badge</span>
</span>

Customisation ​

css
.badge {
  --margin-left: 0;
  --margin-top: 0;
}

Usage Guidelines ​