Validation Message

Explains validation result.

html

<p class="vm vm--error" style="font-size:13px;" role="alert">
  <span class="vm__icon" aria-hidden="true"></span>
  Password must include a number.
</p>
<style>
.vm { display: flex; align-items: center; gap: 6px; font-family: system-ui, sans-serif; color: #241430; max-width: 280px; margin: 0; padding: 8px 10px; border-radius: 8px; border: 1.5px solid; }
.vm--error { background: #E8A02015; border-color: #E8A020; }
.vm--success { background: #A8E6C120; border-color: #A8E6C1; }
.vm--warning { background: #F5C2E020; border-color: #F5C2E0; }
.vm--error .vm__icon::before { content: "\26A0"; }
.vm--success .vm__icon::before { content: "\2713"; }
.vm--warning .vm__icon::before { content: "\2022"; }
</style>

tailwind

<p role="alert" class="vm-tw vm-tw--error flex items-center gap-1.5 font-sans text-[#241430] max-w-[280px] m-0 px-2.5 py-2 rounded-lg border-[1.5px]" style="font-size:13px;">
  <span class="vm-tw-icon vm-tw-icon--error" aria-hidden="true"></span>
  Password must include a number.
</p>
<style>
.vm-tw--error { background: #E8A02015; border-color: #E8A020; }
.vm-tw--success { background: #A8E6C120; border-color: #A8E6C1; }
.vm-tw--warning { background: #F5C2E020; border-color: #F5C2E0; }
.vm-tw-icon--error::before { content: "\26A0"; }
.vm-tw-icon--success::before { content: "\2713"; }
.vm-tw-icon--warning::before { content: "\2022"; }
</style>

react

export function ValidationMessage({
  message = "Password must include a number.",
  severity = "error",
  showIcon = true,
  textSize = 13,
}) {
  const palette = { error: "#E8A020", success: "#A8E6C1", warning: "#F5C2E0" };
  const icons = { error: "\u26A0", success: "\u2713", warning: "\u2022" };
  const c = palette[severity] ?? palette.error;
  return (
    <p role="alert" style={{
      display: "flex", alignItems: "center", gap: 6, fontFamily: "system-ui, sans-serif", color: "#241430",
      maxWidth: 280, margin: 0, padding: "8px 10px", borderRadius: 8, border: `1.5px solid ${c}`,
      background: `${c}20`, fontSize: textSize,
    }}>
      {showIcon && <span aria-hidden="true">{icons[severity] ?? icons.error}</span>}
      {message}
    </p>
  );
}