Helper text

Helper text provides additional information for a situation or action, or allows us to explain the situation in more detail for the input it belongs to.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. additional detailed information needs to be provided for the form-input or card level.
  2. inline statuses (error, warning, etc.) need to be displayed for incorrect values entered in inputs.

Don't use when

  1. the details need to be provided for a button or another UI element, and furthermore, this detailed information does not carry primary value, use a tooltip instead.
  2. when making a general announcement on the layout level; instead, use notification.

Structure

##image##

  1. Icon (boolean)
  2. Helper text (information, warning, error)

Properties

Type

Information

Primary is for when blue (primary) color needed to use while highlighting the link.

Warning

Secondary can be used when you don't want to highlight the link in a contextual order.

Error

When using a link on a dark background, it should be a lighter color.

Behavior

Positioning

##image## (input, modal, widget kullanımından örnek)


The helper text must always be provided together with the related content. This situation helps it to instantly alert the situation occurring in the context or action.

Content

Helper text content should be direct and understandable. The information provided here should give a hint about the field it is in and, therefore, should be kept short. The sentence should be 1 or 2 sentences long.