Skip to main content

Badges

Badges are small circles or rectangles on the corner of the step component. They are used to display additional information about the step.

Example

Check the Badges Example.

Validation Error Badge​

This badge displays when the step or the root has a validation error. You can pass the function that determines if the step or the root has a validation error.

const configuration = {
  validator: {
    step: (step, parentSequence, definition) => {
      return true; // or false
    },
    root: (definition) => {
      return true; // or false
    }
  },
  // ...
};

Counter Badge (Pro)​

This is an optional badge. You can use it to display some additional information about the step. You can display here some number or a short text.

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.

Loading Badge (Pro)​

The loading badge display some loading indicator. You can use it to display some loading indicator when the step is loading. It supports three statuses: loading, loaded and error.

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.

Custom Icon Badge (Pro)​

You can add a badge with a custom icon to each step. This badge allows you to implement custom logic when the badge is clicked.

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.

Force Badge Refresh​

Basically badges are updated automatically after any change in the definition. But you can also update them manually.

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.