ValidationMessage

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

render(<PreviewEn />)

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 />)