Best practices
Do
- Place the indicator on or near the component it describes.
- Use semantic color intentionally to communicate importance and next steps.
- Use short, descriptive text that names the state or status.
Don't
- Mix indicator sizes in the same context.
- Use labels long enough to truncate.
Behavior and states
- It consists of icon and text which reinforces each other’s meaning.