Internationalization (i18n)

Every user-facing string in @bquery/ui goes through the i18n system.

Setting a Locale

import { setLocale } from '@bquery/ui/i18n';

setLocale({
  dialog: {
    close: 'Schließen',
    confirm: 'Bestätigen',
    cancel: 'Abbrechen',
  },
  toast: {
    close: 'Benachrichtigung schließen',
  },
  pagination: {
    prev: 'Zurück',
    next: 'Weiter',
  },
});

Getting or Resetting the Current Locale

import { en, getLocale, resetLocale } from '@bquery/ui/i18n';

const locale = getLocale();
console.log(locale.dialog.close); // 'Schließen'

resetLocale();
console.log(en.dialog.close); // 'Close dialog'

Using the t() Function

import { t } from '@bquery/ui/i18n';

t('dialog.close');                         // 'Schließen'
t('input.characterCount', { count: 5, max: 100 }); // '5 of 100 characters'

Component Defaults That Now Localize Automatically

Current releases route more built-in strings through the locale system by default. That means you can localize component chrome without rewriting markup:

• password-toggle and clear-value labels in bq-input
• character counter text in bq-input and bq-textarea
• loading, empty-state, and sorting copy in bq-table
• fallback labels in bq-progress, bq-spinner, and bq-icon-button
• pagination and breadcrumb navigation labels
• fallback title/description copy in bq-empty-state
• remove-button labels in bq-chip
• dropdown-menu open/close labels and segmented-control fallback names

import { setLocale } from '@bquery/ui/i18n';

setLocale({
  common: {
    loading: 'Wird geladen',
  },
  input: {
    showPassword: 'Passwort anzeigen',
    hidePassword: 'Passwort verbergen',
    characterCount: '{count} von {max} Zeichen',
  },
  table: {
    loading: 'Daten werden geladen…',
    noData: 'Keine Daten verfügbar',
  },
  emptyState: {
    title: 'Noch nichts hier',
    description: 'Es gibt derzeit nichts anzuzeigen.',
  },
});

Full Locale Reference

import type { BqLocale } from '@bquery/ui/i18n';

const locale: BqLocale = {
  common: { close, open, loading, error, success, warning, info, required, optional, clear, search, noResults },
  dialog: { close, confirm, cancel, ariaLabel },
  drawer: { close },
  toast: { close, success, error, warning, info },
  pagination: { prev, next, page, of, nav, goToPage, firstPage, lastPage },
  input: { showPassword, hidePassword, clearValue, characterCount },
  select: { placeholder, noOptions, clearSelection, openMenu },
  table: { sortAscending, sortDescending, noData, loading, rowsPerPage },
  progress: { ariaLabel },
  accordion: { expand, collapse },
  tabs: { listLabel },
  slider: { ariaLabel, valueText },
  emptyState: { title, description },
  chip: { remove },
  breadcrumbs: { nav },
  iconButton: { defaultLabel },
  dropdownMenu: { open, close },
  segmentedControl: { defaultLabel },
};