ValidationMessage

const PreviewEn = () => {
  return <ValidationMessage>This is a validation message.</ValidationMessage>;
};

render(<PreviewEn />)

ValidationMessage is a typography component used to display short, clear messages that help users understand the status of a form field. Use it to show errors, warnings, success messages, or information. Validation messages are designed to be easy to notice while still fitting naturally into the form layout.

Example

All colours

const AllColorsEn = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <ValidationMessage data-color='danger'>
        This is an error message.
      </ValidationMessage>

      <ValidationMessage data-color='success'>
        This is a success message.
      </ValidationMessage>

      <ValidationMessage data-color='info'>
        This is an informational message.
      </ValidationMessage>

      <ValidationMessage data-color='warning'>
        This is a warning message.
      </ValidationMessage>
    </div>
  );
};

render(<AllColorsEn />)

Guidelines

Use ValidationMessage to provide immediate, context-specific feedback. Messages should be placed close to the field they relate to, so that both visual users and users of assistive technologies can easily understand the connection. See the article on user-triggered error messages for more guidance on good practice.

Text

Validation messages should be short, specific, and help the user move forward. Learn more about how to write good error messages.