Status Indicators

Status indicators are used to easily highlight the state of an object. badge, label, status-label and counter


Badge

Available since 1.0.0

Badge Style Options

badge Status Indicator has three options: default, --pill and --filled

Default Default Default 
<span class="fd-badge">Default</span>
<span class="fd-badge fd-badge--pill"> Default </span>
<span class="fd-badge fd-badge--filled">Default</span>


Badge Color Options

In addition the the default grey, there are three additional Semantic color options available: --success, --warning and -error

Default Default Default

Default Default Default

Default Default Default 
<span class="fd-badge fd-badge--success">Default</span>
<span class="fd-badge fd-badge--warning">Default</span>
<span class="fd-badge fd-badge--error">Default</span>
<br><br>
<span class="fd-badge fd-badge--success fd-badge--pill">Default</span>
<span class="fd-badge fd-badge--warning fd-badge--pill">Default</span>
<span class="fd-badge fd-badge--error fd-badge--pill">Default</span>
<br><br>
<span class="fd-badge fd-badge--success fd-badge--filled">Default</span>
<span class="fd-badge fd-badge--warning fd-badge--filled">Default</span>
<span class="fd-badge fd-badge--error fd-badge--filled">Default</span>

Label

Available since 1.0.0

A label is similar to the badge status Indicator, but it does not have have any borders or background color. Color options of default grey, --success, --warning and --error are available.

Default Success Warning Error 
<span class="fd-label">Default</span>
<span class="fd-label fd-label--success">Success</span>
<span class="fd-label fd-label--warning">Warning</span>
<span class="fd-label fd-label--error">Error</span>

Status Indicator Label

Available since 1.1.0

Status Indicator Label with build in status icons

Available Away Busy Appear Offline 
<span class="fd-status-label fd-status-label--available">Available</span>
<span class="fd-status-label fd-status-label--away">Away</span>
<span class="fd-status-label fd-status-label--busy">Busy</span>
<span class="fd-status-label fd-status-label--offline">Appear Offline</span>


Status Indicator Label with any icons

Custom Icon Success Warning Error 
<span class="fd-status-label sap-icon--history">Custom Icon</span>
<span class="fd-status-label sap-icon--message-success">Success</span>
<span class="fd-status-label sap-icon--message-warning">Warning</span>
<span class="fd-status-label sap-icon--message-error">Error</span>


Status Indicator Label with Semantic colors

Default Success Warning Error 
<span class="fd-status-label">Default</span>
<span class="fd-status-label fd-status-label--success">Success</span>
<span class="fd-status-label fd-status-label--warning">Warning</span>
<span class="fd-status-label fd-status-label--error">Error</span>

Counter

Available since 1.4.0

Default Counter

Counter has a minimum value 1. Maximum display is 999+

5 25 101 999+ 
<span class="fd-counter" aria-label="Unread count">5</span>
<span class="fd-counter" aria-label="Unread count">25</span>
<span class="fd-counter" aria-label="Unread count">101</span>
<span class="fd-counter" aria-label="Unread count">999+</span>


Counter inline with a paragraph

Lorem ipsum 5 

<p>Lorem ipsum <span class="fd-counter" aria-label="Unread count">5</span> </p>


Counter with Tabs

<ul class="fd-tabs" role="tablist">
   <li class="fd-tabs__item">
      <a class="fd-tabs__link" aria-controls="AvcVC566" href="#AvcVC566" role="tab">Link
      <span class="fd-counter" aria-label="Unread count">25</span></a>
   </li>
   <li class="fd-tabs__item">
      <a class="fd-tabs__link" aria-controls="5mxO9110" aria-selected="true" href="#5mxO9110"
      role="tab">Selected</a>
   </li>
   <li class="fd-tabs__item">
      <a class="fd-tabs__link" aria-controls="r0pk3445" href="#r0pk3445" role="tab">Link</a>
   </li>
   <li class="fd-tabs__item">
      <a class="fd-tabs__link" aria-controls="Dj1Ri832" aria-disabled="true"
      role="tab">Disabled</a>
   </li>
</ul>


Counter with --notification modifier

<button class="fd-button--light sap-icon--bell" aria-label="Notifications">
    <span class="fd-counter fd-counter--notification" aria-label="Unread count">1</span>
</button>

<button class="fd-button--light sap-icon--bell" aria-label="Notifications">
    <span class="fd-counter fd-counter--notification" aria-label="Unread count">20</span>
</button>

<button class="fd-button--light sap-icon--bell" aria-label="Notifications">
    <span class="fd-counter fd-counter--notification" aria-label="Unread count">300</span>
</button>

<button class="fd-button--light sap-icon--bell" aria-label="Notifications">
    <span class="fd-counter fd-counter--notification" aria-label="Unread count">999+</span>
</button>