Status labels

Status labels tell the user more about the status of an element. Each status has its own color.

Like with badges, the background and border has 48% tint-light. Except for the neutral version. There we use 48% neutral-regular to have enough contrast.


There are two sizes available that follow the body and body small typography. Both have 12dp spacing between the label and container.

In use

Typically, these status labels are used inline with text, indicating the state of that element.