Intro
A status info label provides additional information about an object using a flexible combination of text and an icon.
Status info label displayed in a horizontal and stacked layout
Usage
Do
Use a status info label to display complementary information about an object.
Don't
Don’t use a status info label as an interactive component that includes links.
- Customize the icon and label layout based on your needs.
- Keep text values concise.
- Avoid using complete sentences within a status info label item.
Positive example for using a status info label row
Negative example of using very long text values and including links
Anatomy
A. Icon (Optional)
The icon is a visual illustration that can complement the text value or be used independently. If it is combined with a label, it can be placed as a leading or trailing element.
B. Label (Optional)
The label indicates short information bits such as keywords, categories, or status. The text value can be used independently or combined with an icon.
C. Dot (Optional)
A dot can be used to separate status info label items in a horizontal alignment.
Anatomy of a status info label row
Behavior and Interaction
Status info label items are not interactive. If there is more than one status info label item, they may either line up in a horizontal layout one after the other or be stacked under each other. A stacked column can be either left or right-aligned.
Variations
Status Info Label Components
A. Icon Only
Shows visual information such as an icon, image, logo, or avatar.
B. Label Only
Text value that implies a brief description, for example, it can show the priority or urgency of the object’s status. Maintain wording to a maximum of two words.
C. Leading Icon
A leading icon is placed in front of the label.
D. Trailing Icon
A trailing icon follows the label.
Variations of status info label components
Layout
Horizontal vs. Stacked
Status info label items can be arranged horizontally, optionally dividing them with a dot, and can either be wrapped to the next line or be stacked vertically.
Status info label row (left) and status info label stack (right)
Color
Default vs. Semantic
The default tag color is grey, but status info label items can also be displayed in many different colors of the semantic color palette.
Examples
Status info label nested in different components: card (left), object cell (middle), and object header (right)
Resources
Development: FioriStatusInfoLabel
Related Components/Patterns: Cards Overview, Object Header, Object Cell