Status label
A status label highlights an item's status for quick recognition. Status labels use color to indicate meanings that users can learn and recognize across products.
Design Tips
Whenever possible, status labels should be placed on a white background. If this is not possible, use the withBorder prop. When high contrast mode is activated, the status label's style will adjust to meet accessibility standards on a navy background.
Avoid placing status labels on top of other elements, such as images.
The withBorder prop adds a border. The border color is the same color as the text. Use this prop only if the contrast ratio between the StatusLabel and it's parent is insufficient.
The filled prop adds a solid background and makes the text darker. This can be used in combination with the lowerCase prop. This should be used sparingly and is notably used to indicate that a learnable is included in a Journey.
Overflow
A status label is constrained by the width of its parent, so label text can wrap to multiple lines. By convention, label text should be as concise as possible to avoid text wrapping.