Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Validation Status

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

This component provides the user with information on which standards each piece of data must comply with. And it validates based on the information that the user enters in the input that precedes it.

import { ValidationStatus } from '@kubit-ui-web/react-components'
12345678910
<ValidationStatus
  variant="DEFAULT"
  stateIcons={{
    DEFAULT: { icon: 'ICON_PLACEHOLDER', altText: 'DEFAULT' },
    SUCCESS: { icon: 'ICON_PLACEHOLDER', altText: 'SUCCESS' },
    ERROR: { icon: 'ICON_PLACEHOLDER', altText: 'ERROR' },
  }}
  items={[
    { state: 'DEFAULT', text: { content: 'This is the first requirement' } },
    { state: 'ERROR', text: { content: 'This is the first requirement error' } },

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<ValidationStatus
  variant="DEFAULT"
  stateIcons={{
    DEFAULT: { icon: 'ICON_PLACEHOLDER', altText: 'DEFAULT' },
    SUCCESS: { icon: 'ICON_PLACEHOLDER', altText: 'SUCCESS' },
    ERROR: { icon: 'ICON_PLACEHOLDER', altText: 'ERROR' },
  }}
  items={[
    { state: 'DEFAULT', text: { content: 'This is the first requirement' } },
    { state: 'ERROR', text: { content: 'This is the first requirement error' } },
OverlayStyling API
Validation StatusDesign Specs