Object Status

Object Status is replacing the Label Status Indicator and Badges (now Inverted Object Status). It’s used for representing a status.


Object Status Icon Only

<span class="fd-object-status fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--critical sap-icon--status-critical"></span>
<span class="fd-object-status fd-object-status--positive sap-icon--status-positive"></span>
<span class="fd-object-status fd-object-status--informative sap-icon--hint"></span>
<span class="fd-object-status sap-icon--to-be-reviewed"></span>


Object Status Text Only

Negative Critical Positive informative Default 
<span class="fd-object-status fd-object-status--negative">Negative</span>
<span class="fd-object-status fd-object-status--critical">Critical</span>
<span class="fd-object-status fd-object-status--positive">Positive</span>
<span class="fd-object-status fd-object-status--informative">informative</span>
<span class="fd-object-status">Default</span>


Object Status Icon and Text

Negative Critical Positive Informative Default

RTL Support

Negative Critical Positive Informative Default 
<span class="fd-object-status fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status sap-icon--to-be-reviewed">Default</span>

<br><br>

<div dir="rtl">
<h4>RTL Support</h4>
    <span class="fd-object-status fd-object-status--negative sap-icon--status-negative">Negative</span>
    <span class="fd-object-status fd-object-status--critical sap-icon--status-critical">Critical</span>
    <span class="fd-object-status fd-object-status--positive sap-icon--status-positive">Positive</span>
    <span class="fd-object-status fd-object-status--informative sap-icon--hint">Informative</span>
    <span class="fd-object-status sap-icon--to-be-reviewed">Default</span>
</div>


Object Status with Generic Indication Colors

Dark Red Red Yellow Green Blue Teal Purple Pink 
<span class="fd-object-status fd-object-status--indication-1">Dark Red</span>
<span class="fd-object-status fd-object-status--indication-2">Red</span>
<span class="fd-object-status fd-object-status--indication-3">Yellow</span>
<span class="fd-object-status fd-object-status--indication-4">Green</span>
<span class="fd-object-status fd-object-status--indication-5">Blue</span>
<span class="fd-object-status fd-object-status--indication-6">Teal</span>
<span class="fd-object-status fd-object-status--indication-7">Purple</span>
<span class="fd-object-status fd-object-status--indication-8">Pink</span>


Clickable Object Status

For clickable Object Status add the fd-object-status--link modifier class.

Default Negative Positive Critical Informative

Dark Red Red Yellow Green Blue Teal Purple Pink 
<a href="#" class="fd-object-status fd-object-status--link">Default</a>
<a href="#" class="fd-object-status fd-object-status--negative fd-object-status--link">Negative</a>
<a href="#" class="fd-object-status fd-object-status--positive fd-object-status--link">Positive</a>
<span role="button" class="fd-object-status fd-object-status--critical fd-object-status--link sap-icon--status-critical">Critical</span>
<span role="button" class="fd-object-status fd-object-status--informative fd-object-status--link sap-icon--hint">Informative</span>

<br><br>

<a href="#" class="fd-object-status fd-object-status--link fd-object-status--indication-1">Dark Red</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--indication-2">Red</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--indication-3">Yellow</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--indication-4">Green</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--indication-5">Blue</a>
<span role="button" class="fd-object-status fd-object-status--link fd-object-status--indication-6">Teal</span>
<span role="button" class="fd-object-status fd-object-status--link fd-object-status--indication-7">Purple</span>
<span role="button" class="fd-object-status fd-object-status--link fd-object-status--indication-8">Pink</span>


Inverted Object Status

Inverted Object Status is achieved by adding the fd-object-status--inverted modifier class.

Inverted Negative Inverted Warning Inverted Success Inverted informative 3 2.99

Inverted Default Negative Critical Positive Informative Neutral

Clickable Inverted Object Status

Negative Critical Positive Informative Neutral

RTL Support

Inverted Negative Inverted Warning Inverted Success Inverted informative 3 2.99

Inverted Default Negative Critical Positive Informative Neutral 
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative">Inverted Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical">Inverted Warning</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive">Inverted Success</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative">Inverted informative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive">3</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative">2.99</span>

<br><br>

<span class="fd-object-status fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status fd-object-status--inverted sap-icon--to-be-reviewed">Neutral</span>

<br>
<br>
<h4>Clickable Inverted Object Status</h4>
<a class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</a>
<a class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</a>
<a class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--positive sap-icon--status-positive">Positive</a>
<a class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--informative sap-icon--hint">Informative</a>
<a class="fd-object-status fd-object-status--link fd-object-status--inverted sap-icon--to-be-reviewed">Neutral</a>

<br><br>

<div dir="rtl">
<h4>RTL Support</h4>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative">Inverted Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical">Inverted Warning</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive">Inverted Success</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative">Inverted informative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive">3</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative">2.99</span>

<br><br>

<span class="fd-object-status fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status fd-object-status--inverted sap-icon--to-be-reviewed">Neutral</span>
</div>


Object Status with Generic Indication Colors

Indication1 Indication2 Indication3 Indication4 Indication5 Indication6 Indication7 Indication8

Clickable Inverted Object Status

Indication1 Indication2 Indication3 Indication4 Indication5 Indication6 Indication7 Indication8 
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1">Indication1</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-2">Indication2</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3">Indication3</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-4">Indication4</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5">Indication5</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6">Indication6</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-7">Indication7</span>
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-8">Indication8</span>

<br>
<br>

<h4>Clickable Inverted Object Status</h4>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-1">Indication1</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-2">Indication2</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-3">Indication3</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-4">Indication4</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-5">Indication5</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-6">Indication6</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-7">Indication7</a>
<a href="#" class="fd-object-status fd-object-status--link fd-object-status--inverted fd-object-status--indication-8">Indication8</a>


Object Status Large Design

For Object Status in Large Design use the fd-object-status--large modifier class.

Success Informative Negative Critical Positive Informative Default

Inverted Negative Inverted Warning Inverted Success Inverted informative 3 2.99

Inverted Default Negative Critical Positive Informative Neutral

Indication1 Indication2 Indication3 Indication4

Indication5 Indication6 Indication7 Indication8 
<span class="fd-object-status fd-object-status--large fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--large fd-object-status--critical sap-icon--status-critical"></span>
<span class="fd-object-status fd-object-status--large fd-object-status--positive">Success</span>
<span class="fd-object-status fd-object-status--large fd-object-status--informative">Informative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--large fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--large fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status fd-object-status--large sap-icon--to-be-reviewed">Default</span>

<br><br>

<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--negative">Inverted Negative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--critical">Inverted Warning</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--positive">Inverted Success</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--informative">Inverted informative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--positive">3</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--informative">2.99</span>

<br><br>

<span class="fd-object-status fd-object-status--large fd-object-status--inverted">Inverted Default</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--negative sap-icon--status-negative"></span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--negative sap-icon--status-negative">Negative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--critical sap-icon--status-critical">Critical</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--positive sap-icon--status-positive">Positive</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted fd-object-status--informative sap-icon--hint">Informative</span>
<span class="fd-object-status fd-object-status--large fd-object-status--inverted sap-icon--to-be-reviewed">Neutral</span>

<br><br>

<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-1">Indication1</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-2">Indication2</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-3">Indication3</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-4">Indication4</a>
<br><br>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-5">Indication5</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-6">Indication6</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-7">Indication7</a>
<a href="#" class="fd-object-status fd-object-status--large fd-object-status--link fd-object-status--inverted fd-object-status--indication-8">Indication8</a>