Value States

Foundations / Interaction / States / Value States

Intro

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). The following value states are available: none, positive, negative, warning, information, and custom.

Note on naming:

These standard names for the value states are generic. They might not reflect the most appropriate term for the state in the business context, or the technical names used in some existing implementations.

None

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

Other names: Neutral

Input – none

2
do
false

Use the neutral state:

  • Before validation is triggered.
  • After successful validation.
  • If there is no reason to use another value state.
  • If you want to indicate a neutral object status.
  • If a message contains non-critical, additional information.
dont
false

Don’t use the neutral state:

Positive

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

Other names: Success (messaging), Good

Input – positive

2
do
false

Use the positive state:

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

Don’t use the positive state:

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

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.

Other names: Error (messaging), Bad

Input – negative

2
do
false

Use the negative state:

  • 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.
dont
false

Don’t use the negative state:

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

Warning

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.

Other names: Warning (messaging)

Input – critical

2
do
false

Use the critical state:

  • If the current content can be finalized but doing so might lead to an error later.
  • 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.
  • If a message contains information about a warning.
dont
false

Don’t use the critical state:

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

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.

Input – information

2
do
false

Use the information state:

  • 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).
dont
false

Don’t use the information state:

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

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).

2
do
false

Use the custom state:

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

Don’t use the custom state:

  • 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 warning). 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.

Components

Design System Foundations

Specifications

Components

Design System Foundations