Value states show the semantic meaning of a UI element in a specific use case and context. A UI element can have only one value state at any given time.

By default, the value states are depicted using the standard semantic colors for the respective theme (such as Morning Horizon).

Variants

The following value states are available:

• None
• Positive
• Negative
• Critical
• Information
• Custom

None

This is the default state of an element. It means that no semantic or industry-specific meaning is assigned to it.

  Use:

• Before validation is triggered.
• After successful validation.

  Don’t Use:

• After validation with problems.
• For information messages. In this case, use the information value state.

“None” state for an input field – live example

Positive

Use this status to convey that the displayed element or value has a positive meaning for the given use case.

  Use:

• If an action or validation was successful.
• If a message indicates that a process was finalized without any issues.

  Don’t Use:

• If issues occurred while finalizing a process.
• If issues occurred during validation.

“Positive” state for an input field – live example

Negative

This status is used for elements that carry negative meaning, such as errors. It indicates a bad or negative status or consequence and prevents users from continuing their work.

  Use:

• If users need to be prevented from finalizing the current mode or page.
• If validation for the user input failed and the problem must be fixed before the user can continue.
• If a message contains information about an error.
• If the component carries information that requires the user’s immediate attention.

  Don’t Use:

• If the user input was validated successfully.
• If the user input was validated and only minor problems occurred.

“Negative” state for an input field – live example

Critical

This state identifies a minor problem or warning that the user should take into consideration. Users can carry on working, but might run into an error later on.

  Use:

• If the current content can be finalized, but doing so might lead to an error later on.
• If the user input was validated and a minor problem occurred. It is possible to continue without fixing the problem, but doing so might lead to an error later on.
• If a message contains information about a warning.

  Don’t Use:

• If the input was validated successfully.
• If the user input was validated and a major problem occurred.

“Critical” state for an input field – live example

Information

Depending on the component, this state can be enabled for the following cases:

• If used with inputs and any other form components, this state can indicate an AI suggestion.
• If used in a list, as a text, or in any type of dialog, it can indicate an information message or highlighted element.

  Use:

• If you need to display an information message.
• If you want to draw attention to a component (for example, to highlight that recommendations are available for a field).

  Don’t Use:

• If the user input was validated successfully.
• If the user input was validated and a major problem occurred.

“Information” state for an input field – live example

Custom

If there is no suitable semantic state, a custom state can be offered. The exact visualization depends on the colors set (custom state) or what is inherited (Inherit state).

  Use:

• If additional states are required to support a special business use case.
• If the value states required have different semantics or no semantics.

  Don’t Use:

• If one of the value states already provided fits the use case.

Semantic and Industry-Specific Colors

Semantic Colors

Semantic colors denote standard value states (such as positive, negative, and critical). Each color has the same basic meaning in all contexts.

Industry-Specific Colors (Indication Colors)

Industry-specific colors reflect the color conventions in a line of business or industry (technical name: indication colors). The meaning of each color depends on the business context.

To apply the industry-specific colors, you can use the custom state.

Related Links