# LangTag

> The language of a piece of content (not of the interface): a small coloured code tag beside a title, message or document, read aloud as the language's full name.

Source: https://docs.nasaqui.com/components/lang-tag

## Install

```bash
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 use

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

## When not to use

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

## Import

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

## Quick start

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

## Anatomy

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

## API

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lang` | `string \| null` | none | `ar`, `en`, `en-GB`, `pt_BR`. Nothing renders when empty. |
| `region?` | `boolean` | `false` | Show the full code (`EN-GB`) instead of the base (`EN`). |
| `hue?` | `TagHue` | by language | Override the colour. Built in: ar amber, en blue, fr violet, es orange, de teal, tr red, ur green, fa pink, others gray. |
| `className?` | `string` | none | Merged onto the badge. |

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

## Accessibility

- 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 & i18n

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 & tokens

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

## Do / Don't

- 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.

## Related

- [Badge](https://docs.nasaqui.com/components/badge)
- [Switchers](https://docs.nasaqui.com/components/switchers)

## Lab

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

## Code

### React

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

### shadcn

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

### Vue

```vue
<script setup lang="ts">
import { NqLangTag } from "@fadymondy/nasaq/vue";
</script>

<template>
  <div class="flex flex-col gap-2">
    <p class="flex items-center gap-2"><NqLangTag lang="en" /> Welcome to the store</p>
    <p class="flex items-center gap-2"><NqLangTag lang="ar" /> مرحبا بكم في المتجر</p>
    <p class="flex items-center gap-2"><NqLangTag lang="fr" /> Bienvenue dans la boutique</p>
  </div>
</template>
```

### Blade

```blade
<div class="flex flex-col gap-2">
    <p class="flex items-center gap-2"><x-nq::lang-tag lang="en" /> Welcome to the store</p>
    <p class="flex items-center gap-2"><x-nq::lang-tag lang="ar" /> مرحبا بكم في المتجر</p>
    <p class="flex items-center gap-2"><x-nq::lang-tag lang="fr" /> Bienvenue dans la boutique</p>
</div>
```

### HTML + Alpine

```html
<div class="flex flex-col gap-2">
    <p class="flex items-center gap-2"><span data-slot="lang-tag"  style="--tag-solid: var(--nq-tag-blue); --tag-soft: var(--nq-tag-blue-soft)"     data-lang="en" dir="ltr" title="English" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)] font-mono uppercase tracking-wide"><span aria-hidden="true">en</span>
        <span class="sr-only">Content language: English</span></span>
 Welcome to the store</p>
    <p class="flex items-center gap-2"><span data-slot="lang-tag"  style="--tag-solid: var(--nq-tag-amber); --tag-soft: var(--nq-tag-amber-soft)"     data-lang="ar" dir="ltr" title="Arabic" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)] font-mono uppercase tracking-wide"><span aria-hidden="true">ar</span>
        <span class="sr-only">Content language: Arabic</span></span>
 مرحبا بكم في المتجر</p>
    <p class="flex items-center gap-2"><span data-slot="lang-tag"  style="--tag-solid: var(--nq-tag-violet); --tag-soft: var(--nq-tag-violet-soft)"     data-lang="fr" dir="ltr" title="French" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-transparent bg-[var(--tag-soft)] text-[var(--tag-solid)] font-mono uppercase tracking-wide"><span aria-hidden="true">fr</span>
        <span class="sr-only">Content language: French</span></span>
 Bienvenue dans la boutique</p>
</div>
```