LanguageToggle

Implemented

Header language switcher. Shows the TARGET language token (e.g. "EN" while FR is active); when onChange is provided, toggles FR⇄EN. aria-label always announces the current language and the action so the single visible token stays unambiguous to assistive tech.

Categoryatoms

Sourcecomponents/atoms/LanguageToggle/LanguageToggle.tsx

AI HintFR/EN switcher that shows the TARGET language token — pass onChange to make it toggle (aria-pressed mirrors EN) and omit it for a display-only control. Tap target >= var(--ep-tap-min); the accessible label announces current language and action.

Header language switcher. Shows the TARGET language token (e.g. "EN" while FR is active); when onChange is provided, toggles FR⇄EN. aria-label always announces the current language and the action.

LanguageToggle

Atoms — controls

Minimal single-token FR/EN toggle. Shows the TARGET language token (not the current one); aria-pressed mirrors EN when interactive, omitted display-only. For header/nav locale switching prefer the LanguageSwitcher molecule (aria-current group, BCP 47 casing, inline/compact variants; the fab variant was retired in ADR-038).

FR active → shows EN

EN active → shows FR

Props

Preview

LanguageToggle

Prop

Type

Required

Default

Description

value

'FR' | 'EN'

Optional

'FR'

Currently active language shown on the control

onChange

(next: 'FR' | 'EN') => void

Optional

—

Called with the next language when toggled. Omit for a display-only control.

className

string

Optional

''

Extra utility classes appended to the button

onClick

(event: React.MouseEvent<HTMLButtonElement>) => void

Optional

—

Called when the element is activated.

ariaLabel

string

Optional

—

Override for the built-in English aria-label template, e.g. localized announcement.

Quick use:<LanguageToggle />

Accessibility

ARIA rolebutton

Usage

Import

tsxSnippet

import { LanguageToggle } from "@epasslive/design-system"

Example 1

tsxSnippet

<LanguageToggle value="FR" />

Example 2

tsxSnippet

<LanguageToggle value={lang} onChange={setLang} />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms