Status Indicators

DEPRECATED. Depending on the use case, use either the InfoLabel component or the ObjectStatusCoponent component

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

Badge

Badge Style Options

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

Label Label Label

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

Badge Color Options

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

Label Label Label

Label Label Label

Label Label Label

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

Label

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

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

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 fd-button--transparent sap-icon--bell" aria-label="Notifications">
    <span class="fd-counter fd-counter--notification" aria-label="Unread count">1</span>
</button>

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

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

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