The generic tag consists of:

1. Container: The layout container of the control. Carries all interaction states.
2. Status indicator / Criticality indicator (mandatory): The indicator displays the status/criticality of the tag. Only use it with the available semantic colors.
3. Title (mandatory): Always use a meaningful title. Keep it simple and try to use no more than 3 words.
4. Value and unit of measure (optional): The value represents the numeric (key) attribute and its unit. The value has a semantic color, and the unit inherits the color from the value. The color of the value must be the same as the color of the status indicator. For more information, see Object Number.
5. Message icon (optional): The message icon can help visualize the status/criticality of the tag. The color of the icon is always the same as the color of the status indicator. Always use the correct message icon for the respective status/criticality.

Anatomy of the generic tag

Generic tag introduces 5 color types (regular state), as follows:

A. Information: Signals neutral status or context, such as general details or KPIs, without implying errors or warnings.
B. Positive: Indicates a favorable or successful status, such as meeting a target or achieving a goal.
C. Critical: Highlights a warning that requires attention but is not necessarily an error.
D. Negative: Indicates an error, failure, or undesirable status that needs correction.
E. None: Uses the default style with no semantic color applied.

Generic tag types (regular state)

The generic tag introduces 3 states in all its types, as follows:

A. Regular: Default appearance of the tag with no user interaction.
B. Hover: The background slightly highlights when the user hovers over the tag.
C. Active: The tag is pressed or clicked, showing a stronger border.

Generic tag in value states

Generic tag in a left-to-right (LTR) mode

Generic tag in a right-to-left (RTL) mode