Fallback Language

Language used when a translation is missing.

html

<div class="fbl fbl--de">
  <p class="fbl__key">t(&quot;welcome_message&quot;, locale: &quot;de&quot;)</p>
  <p class="fbl__result fbl__result--en" lang="en">Welcome back</p>
  <p class="fbl__result fbl__result--fr" lang="fr">Content de vous revoir</p>
  
  <p class="fbl__note fbl__note--en">de has no translation for this key &mdash; falling back to <strong style="color:#E8A020;">en</strong>.</p>
  <p class="fbl__note fbl__note--fr">fr has its own translation, no fallback needed.</p>
  <p class="fbl__note fbl__note--de">en has its own translation, no fallback needed.</p>
  
</div>
<style>
.fbl { font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.fbl__key { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.fbl__result { display: none; font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.fbl--en .fbl__result--en, .fbl--de .fbl__result--en, .fbl--fr .fbl__result--fr { display: block; }
.fbl__note { display: none; margin: 0; font-size: 11px; color: #24143099; }
.fbl--en .fbl__note--en, .fbl--fr .fbl__note--fr, .fbl--de .fbl__note--de { display: block; }
</style>

tailwind

<div class="fbltw fbltw--de font-sans text-base text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">t(&quot;welcome_message&quot;, locale: &quot;de&quot;)</p>
  <p class="fbltw__result fbltw__result--en hidden font-bold text-lg m-0 mb-2" lang="en">Welcome back</p>
  <p class="fbltw__result fbltw__result--fr hidden font-bold text-lg m-0 mb-2" lang="fr">Content de vous revoir</p>
  
  <p class="fbltw__note fbltw__note--en hidden m-0 text-[11px] text-[#24143099]">de has no translation for this key &mdash; falling back to <strong style="color:#E8A020;">en</strong>.</p>
  <p class="fbltw__note fbltw__note--fr hidden m-0 text-[11px] text-[#24143099]">fr has its own translation, no fallback needed.</p>
  <p class="fbltw__note fbltw__note--de hidden m-0 text-[11px] text-[#24143099]">en has its own translation, no fallback needed.</p>
  
</div>
<style>
.fbltw--en .fbltw__result--en, .fbltw--de .fbltw__result--en, .fbltw--fr .fbltw__result--fr { display: block; }
.fbltw--en .fbltw__note--en, .fbltw--fr .fbltw__note--fr, .fbltw--de .fbltw__note--de { display: block; }
</style>

react

export function FallbackLanguage({
  requestedLocale = "de",
  stringKey = "welcome_message",
  accent = "#E8A020",
  showNote = true,
}) {
  const resolved = requestedLocale === "fr" ? "fr" : "en";
  const text = resolved === "fr" ? "Content de vous revoir" : "Welcome back";
  const note = requestedLocale === "de"
    ? <>de has no translation for this key &mdash; falling back to <strong style={{ color: accent }}>en</strong>.</>
    : `${requestedLocale} has its own translation, no fallback needed.`;
  return (
    <div style={{ font: "15px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>t("{stringKey}", locale: "{requestedLocale}")</p>
      <p lang={resolved} style={{ fontWeight: 700, fontSize: 18, margin: "0 0 8px" }}>{text}</p>
      {showNote && <p style={{ margin: 0, fontSize: 11, color: "#24143099" }}>{note}</p>}
    </div>
  );
}