Overview
The Info Label is a small, non-interactive, numeric, or text-based component. Its primary use is to add user-defined characteristics to an object. You can use it in tables, headers, custom tiles, and display forms.
Look and Feel
When to Use
Before using the info label, consider whether you are highlighting a characteristic of an object or displaying a status of an operation or transaction. This distinction is particularly valid if you would like to display the state of an object.
Consider the following example. You have an object or a system that is currently working as intended. Its state is therefore Running. You decide to perform a Stop operation to prepare it for replication. The status of the Stop operation is a success. As a result, the system state changes to Not Running. In this case, Running and Not Running are system states and should use the info label. The success of the Stop operation is a status and, if displayed, should use the object status control.
Recommended
- Use the info label to highlight a characteristic of an object.
Not Recommended
- Don't use the info label to indicate the status of an object. Use the object status instead.
- Don't use the info label to convey semantics. Use the object status instead.
- Avoid using the info label with icons.
Anatomy
Display Mode
The info label supports a display mode option. This allows the control to be used inside display-only controls (such as forms) and for use cases requiring a smaller component (such as bylines and descriptions). Display mode reduces the overall control size, font size, and margins.
Display Mode
Color Scheme
The info label comes with 10 predefined color variants. Change the default color variant to best match the characteristic you are highlighting. Consider using separate colors for separate characteristic values.
Color Scheme
Resources
For Reviewers
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.
Design