Do

Use a status info label to display complementary information about an object.

Don't

Don’t use the status info label as an interactive component that includes links.

Positive example of a status info label row

Negative example of using very long text values and including links

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 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

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

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)