Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Validation Status

v.1.0.0 | Saturn

Import

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

Props

Let's delve into the versatility of the validationStatus component by examining all its avalaible props.

Note that the validationStatus component's default styling properties can be moderately adjusted through the ctv prop, in case the project do not need a full variant customization. This limited customization ensures a seamless balance between predefined aesthetic and your specific design requirements. Additionally, it's essential to highlight that Kubit always provided the option to full customized all the variants that your project needs.

PropertyDescriptionVariantDefault
variant
Required
Variant of ValidationStatusString-
items
Required
Set the validation list to show into the componentIValidationStatusList-
stateIcons
Required
Set the custom icons to show in differents row statesValidationStatusStateIconsType-
maxItemsAllowedSet the row max number allowedNumber6
dataTestIdData test idString-
ctvModify styles for the default version of the componentValidationStatusStylesProps-
Validation StatusDesign Specs
Validation StatusStyling API