Internationalization #

The aFP Design System include a built-in internationalization (i18n) system to make the UI available in multiple languages. You can set the active language, provide your own translations, and remove or override existing ones — without rebuilding the application.

Change language #

The selected language only applies to this browser tab and for the current session. When you close the tab or open the documentation in a new tab, the language will reset to its default.

Note that this setting only changes the language of the UI components (such as ARIA labels and other accessibility-related texts), not the language of the overall documentation content.

How it works #

The i18n system stores translation dictionaries for each language. When a component needs to display text, it looks up the correct translation for the current language. If no translation is found for the active language, the fallback language (en by default) is used.

You can:

• Switch the active language with setAfpLanguage.
• Find out what the current language is with getAfpLanguage.
• Add new translations with registerAfpTranslation or registerAfpTranslations.
• Remove translations with unregisterAfpTranslation.

All components that are registered for i18n will automatically re-render when the language changes.

Functions #

Set language #

setAfpLanguage(code: string) #

Sets the active language for all i18n-enabled components.

• code: A language code (e.g. "en", "de-DE"). Only the base part is used ("de-DE" becomes "de").
• If you pass a code that is not recognized, the fallback language is used instead.
• Automatically refreshes the text in all registered components.

import { setAfpLanguage } from '@afp-design-system/core';

setAfpLanguage('de'); // Switches to German
setAfpLanguage('en'); // Switches to English

Get language #

getAfpLanguage(): string #

Returns the language currently in use. If no language has been set yet, it will:

1. Try to detect the browser's preferred language.
2. Use the fallback language (en) if detection fails.

import { getAfpLanguage } from '@afp-design-system/core';

console.log(getAfpLanguage()); // e.g. "en"

Register translation #

registerAfpTranslation(code: string, dict: AfpTranslationDict) #

Adds or overrides translations for one language.

• code: Language code (e.g. "fr").
• dict: An object with translation keys and their translated text.
• If you register a dictionary for the currently active language, the UI updates immediately.

import { registerAfpTranslation } from '@afp-design-system/core';

registerAfpTranslation('fr', {
  'afp-badge.aria-label': 'Badge de statut'
});

Register multiple translations #

registerAfpTranslations(bundle: AfpTranslation) #

Adds or overrides translations for multiple languages in one call.

• bundle: An object where each key is a language code and each value is its dictionary.

import { registerAfpTranslation } from '@afp-design-system/core';

registerAfpTranslations({
  fr: { 'afp-badge.aria-label': 'Badge de statut' },
  es: { 'afp-badge.aria-label': 'Insignia de estado' }
});

Unregister translation #

unregisterAfpTranslation(code: string) #

Removes the translation dictionary for a language.

• code: Language code to remove.
• Does nothing if the code is invalid or not currently registered.

import { unregisterAfpTranslation } from '@afp-design-system/core';

unregisterAfpTranslation('fr');

Default Translations #

These translations are included by default. You can override them at any time by registering your own dictionaries.

Notes #

• Placeholders like %s will be replaced by the arguments passed to the translation function.
• The system is case-insensitive for language codes ("DE", "de", and "de-DE" are treated the same).
• You do not need to translate all keys for every language — missing keys will fall back to the default language.