Components/Object Status

fd-object-status · 12 examples from SAP's documentation · Back to the gallery

About

Object Status is a short text that represents the semantic status of an object. It has a semantic color and an optional icon. Typically, the object status is used in the dynamic page header and as a status attribute of a line item in a table.

Primary

Object Status can display the semantic status of an object: negative (class: \

Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Info Object Status Informative entry

Icon

Object status icon only

Object Status Invalid Entry Object Status Warning issued Object Status Entry successfully validated Object Status Informative entry

Text

Object status text only

Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Info Object Status Informative entry Neutral Object Status

IconAndText

Object status icon and text

Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Info Object Status Informative entry Neutral Object Status

GenericIndicationColors

Object Status with Generic Indication Colors

Dark Red Object Status Indication Color 1 Red Object Status Indication Color 2 Yellow Object Status Indication Color 3 Green Object Status Indication Color 4 Blue Object Status Indication Color 5 Teal Object Status Indication Color 6 Purple Object Status Indication Color 7 Pink Object Status Indication Color 8

ClickableObjectStatus

If the object status is used as a link, a hover effect is shown on non-touch devices. If the object status is shown using a combination of icon and text, there is no hover effect for the icon. If Object Status has to be clicked/tabbed by the user add the \

Regular State

Negative Invalid Entry
Critical Warning issued
Positive Entry successfully validated
Info Informative entry
Neutral Neutral entry
Dark Red Indication Color 1
Red Indication Color 2
Yellow Indication Color 3
Green Indication Color 4
Blue Indication Color 5
Teal Indication Color 6
Purple Indication Color 7
Pink Indication Color 8
Negative Invalid Entry
Critical Warning issued
Positive Entry successfully validated
Info Informative entry
Neutral Neutral entry
Dark Red Indication Color 1
Red Indication Color 2
Yellow Indication Color 3
Green Indication Color 4
Blue Indication Color 5
Teal Indication Color 6
Purple Indication Color 7
Pink Indication Color 8

Down State

Negative Invalid Entry
Critical Warning issued
Positive Entry successfully validated
Info Informative entry
Neutral Neutral entry
Dark Red Indication Color 1
Red Indication Color 2
Yellow Indication Color 3
Green Indication Color 4
Blue Indication Color 5
Teal Indication Color 6
Purple Indication Color 7
Pink Indication Color 8

Visited State

Negative Invalid Entry
Critical Warning issued
Positive Entry successfully validated
Info Informative entry
Neutral Neutral entry
Dark Red Indication Color 1
Red Indication Color 2
Yellow Indication Color 3
Green Indication Color 4
Blue Indication Color 5
Teal Indication Color 6
Purple Indication Color 7
Pink Indication Color 8
Negative Invalid Entry
Critical Warning issued
Positive Entry successfully validated
Info Informative entry
Neutral Neutral entry
Dark Red Indication Color 1
Red Indication Color 2
Yellow Indication Color 3
Green Indication Color 4
Blue Indication Color 5
Teal Indication Color 6
Purple Indication Color 7
Pink Indication Color 8

LargeObjectStatus

Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Info Object Status Informative Entry Neutral Object Status

Inverted

Inverted Object Status(optional inverted visualization) determines whether the background color reflects the set state instead of the control's text. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually. Inverted Object Status is achieved by adding the \

Inverted Negative Object Status Invalid Entry Inverted Warning Object Status Warning issued Inverted Success Object Status Entry successfully validated Inverted informative Object Status Informative entry Inverted Neutral Object Status Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Informative Object Status Informative entry Neutral Object Status

Large Inverted Object Status

Inverted Negative Object Status Invalid Entry Inverted Warning Object Status Warning issued Inverted Success Object Status Entry successfully validated Inverted informative Object Status Informative entry Inverted Neutral Object Status Negative Object Status Invalid Entry Critical Object Status Warning issued Positive Object Status Entry successfully validated Informative Object Status Informative entry Neutral Object Status

InvertedStates

Regular

Neutral Neutral Entry
Information Informative Entry
Information Warning issued
Information Entry successfully validated
Information Invalid Entry
Neutral Neutral Entry
Information Informative Entry
Information Warning issued
Information Entry successfully validated
Information Invalid Entry

Down

Neutral Neutral Entry
Information Informative Entry
Information Warning issued
Information Entry successfully validated
Information Invalid Entry

Regular, Focus

Neutral Neutral Entry
Information Informative Entry
Information Warning issued
Information Entry successfully validated
Information Invalid Entry
Neutral Neutral Entry
Information Informative Entry
Information Warning issued
Information Entry successfully validated
Information Invalid Entry

InvertedIndication

Inverted indication colors

Indication1 Object Status Indication Color 1 Indication2 Object Status Indication Color 2 Indication3 Object Status Indication Color 3 Indication4 Object Status Indication Color 4 Indication5 Object Status Indication Color 5 Indication6 Object Status Indication Color 6 Indication7 Object Status Indication Color 7 Indication8 Object Status Indication Color 8 Indication9 Object Status Indication Color 9 Indication10 Object Status Indication Color 10

Clickable Inverted Object Status (Regular)

Indication1 Indication Color 1
Indication2 Indication Color 2
Indication3 Indication Color 3
Indication4 Indication Color 4
Indication5 Indication Color 5
Indication6 Indication Color 6
Indication7 Indication Color 7
Indication8 Indication Color 8
Indication9 Indication Color 9
Indication10 Indication Color 10

Clickable Inverted Object Status (Hover)

Indication1 Indication Color 1
Indication2 Indication Color 2
Indication3 Indication Color 3
Indication4 Indication Color 4
Indication5 Indication Color 5
Indication6 Indication Color 6
Indication7 Indication Color 7
Indication8 Indication Color 8
Indication9 Indication Color 9
Indication10 Indication Color 10

Clickable Inverted Object Status (Active/Down)

Indication1 Indication Color 1
Indication2 Indication Color 2
Indication3 Indication Color 3
Indication4 Indication Color 4
Indication5 Indication Color 5
Indication6 Indication Color 6
Indication7 Indication Color 7
Indication8 Indication Color 8
Indication9 Indication Color 9
Indication10 Indication Color 10

Clickable Inverted Object Status (Focus)

Indication1 Indication Color 1
Indication2 Indication Color 2
Indication3 Indication Color 3
Indication4 Indication Color 4
Indication5 Indication Color 5
Indication6 Indication Color 6
Indication7 Indication Color 7
Indication8 Indication Color 8
Indication9 Indication Color 9
Indication10 Indication Color 10

InvertedIndicationSecondary

Secondary Set of Inverted indication colors

Indication1b Object Status Indication Color 1b Indication2b Object Status Indication Color 2b Indication3b Object Status Indication Color 3b Indication4b Object Status Indication Color 4b Indication5b Object Status Indication Color 5b Indication6b Object Status Indication Color 6b Indication7b Object Status Indication Color 7b Indication8b Object Status Indication Color 8b Indication9b Object Status Indication Color 9b Indication10b Object Status Indication Color 10b

Clickable Inverted Object Status (Regular)

Indication1b Indication Color 1b
Indication2b Indication Color 2b
Indication3b Indication Color 3b
Indication4b Indication Color 4b
Indication5b Indication Color 5b
Indication6b Indication Color 6b
Indication7b Indication Color 7b
Indication8b Indication Color 8b
Indication9b Indication Color 9b
Indication10b Indication Color 10b

Clickable Inverted Object Status (Hover)

Indication1b Indication Color 1b
Indication2b Indication Color 2b
Indication3b Indication Color 3b
Indication4b Indication Color 4b
Indication5b Indication Color 5b
Indication6b Indication Color 6b
Indication7b Indication Color 7b
Indication8b Indication Color 8b
Indication9b Indication Color 9b
Indication10b Indication Color 10b

Clickable Inverted Object Status (Active/Down)

Indication1b Indication Color 1b
Indication2b Indication Color 2b
Indication3b Indication Color 3b
Indication4b Indication Color 4b
Indication5b Indication Color 5b
Indication6b Indication Color 6b
Indication7b Indication Color 7b
Indication8b Indication Color 8b
Indication9b Indication Color 9b
Indication10b Indication Color 10b

Clickable Inverted Object Status (Focus)

Indication1b Indication Color 1b
Indication2b Indication Color 2b
Indication3b Indication Color 3b
Indication4b Indication Color 4b
Indication5b Indication Color 5b
Indication6b Indication Color 6b
Indication7b Indication Color 7b
Indication8b Indication Color 8b
Indication9b Indication Color 9b
Indication10b Indication Color 10b

Object Status with single line text with ellipsis

By default, Object Status text goes on multiple lines based on the max width that is set for the element. For a single line text with ellipsis add the fd-object-status--truncate modifier class to the fd-object-status base class.

Default behaviour of Object Status with very long text. The text goes on multiple lines. Object Status Invalid Entry Object Status with text truncation with ellipsis Object Status Warning issued Inverted Negative with very, very long text which truncates Object Status Invalid Entry Positive with very, very long text which truncates Object Status Entry successfully validated Indication8 with very, very long text which truncates Object Status Indication Color 8