LangTag

Code

<p className="flex items-center gap-2">  <LangTag lang={post.lang} /> {post.title}</p>

Data Display · beta

Live examples and controls: LangTag in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/lang-tag.json

Shows which language a piece of content is written in, as a short code (AR, EN, FR) in a tag with a fixed colour per language. Screen readers hear "Content language: Arabic" instead of the letters.

When to useCopy Anchor Link

• Lists that mix languages: articles, messages, translations, documents, search results.
• A translation editor, next to each version.

When not to useCopy Anchor Link

• Choosing the interface language: use LocaleSwitcher.
• Content whose language is obvious from the page.

ImportCopy Anchor Link

import { LangTag } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<p className="flex items-center gap-2">
  <LangTag lang={post.lang} /> {post.title}
</p>

AnatomyCopy Anchor Link

LangTag          data-slot="lang-tag" data-lang="ar"   (a Badge, variant="tag", dir="ltr")
├─ code          aria-hidden, uppercase
└─ sr-only name  "Content language: Arabic" / "لغة المحتوى: العربية"

APICopy Anchor Link

LangTagProps extends Omit<ComponentProps<"span">, "children" | "lang">.

Helper: languageName(code, locale) returns the language's name in locale via Intl.DisplayNames, or the code when the runtime does not know it.

AccessibilityCopy Anchor Link

• The visible code is hidden from assistive tech; an sr-only span gives the full language name in the reader's language. The title shows the same name on hover.
• Colour is never the only cue: the code is always visible.

RTL & i18nCopy Anchor Link

The code is a Latin token and is set dir="ltr", so it reads the same in an Arabic layout. The spoken name follows the Nasaq locale.

Styling & tokensCopy Anchor Link

A tag badge in a monospace, uppercase, tracked style. Hues come from the badge tag palette.

Do / Don'tCopy Anchor Link

• Do keep the colour table consistent across a product; override hue app-wide, not per row.
• Don't use flags: a language is not a country.

RelatedCopy Anchor Link

• Badge
• Switchers

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-lang-tag--docs