ValidationAlert

The ValidationAlert component provides a customizable alert that can be used to provide feedback to users about the validity of their input. It is typically used to indicate that the user has entered invalid information, such as an invalid email address or password.

Usage Guidelines

The validation alert component is used to provide feedback to users about the validity of their input. It only renders if both the state and children props are provided.

States

Error
The error state of the validation alert is used to indicate that the user has entered invalid information.

<ValidationAlert state="error">
  The phone number you entered is invalid.
</ValidationAlert>

Success
The success state of the validation alert is used to indicate that the user has entered valid information.

<ValidationAlert state="success">
  The skill testing question has been answered correctly.
</ValidationAlert>

Warning
The warning state of the validation alert is used to indicate that the user has entered information that may be incorrect.

<ValidationAlert state="warning">
  The email address you entered may be incorrect.
</ValidationAlert>

Props

interface ValidationAlertProps

state ? "error" | "success" | "warning" | null

Changes the appearance of the alert to indicate an error, success, or warning state.