# zidane-ui/labels

> The label dictionary and provider for the design system's strings.

Import: `import { … } from 'zidane-ui/labels'`. Source: [ui/src/labels.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx).

Use this entry point to translate or reword the strings the design system renders, such as Copy, Confirm, Cancel and Close. `LabelsProvider` merges your overrides over `DEFAULT_LABELS`, and `useLabels` reads the result. Chat strings have their own dictionary, set through the `labels` prop of `ChatProvider`.

```tsx
import type { ReactNode } from 'react'
import { LabelsProvider } from 'zidane-ui/labels'

const FRENCH = { confirm: 'Confirmer', cancel: 'Annuler', close: 'Fermer' }

export function French({ children }: { children: ReactNode }) {
  return <LabelsProvider labels={FRENCH}>{children}</LabelsProvider>
}
```

## Components

### `LabelsProvider`

Component.

Provides label overrides to the kit's components below it. Providers nest: each one merges
its `labels` over its parent's. Explicit props on a component still win over the dictionary.
A layer with its own keys types the overrides with its dictionary
(`<LabelsProvider<ChatLabels> labels={…}>`).

```ts
function LabelsProvider<L extends object = { addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }>(
  props: LabelsProviderProps<L>,
): Element
```

**Type parameters**

- `L` (`extends object`, default `{ addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }`)

**Parameters**

- `props` (`LabelsProviderProps<L>`): Component props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The tree that reads the labels.
- `labels?` (`Partial<L>`): Keys to override, such as a translation. Merged over the parent provider's labels.

Source: [ui/src/labels.tsx:152](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L152)

## Functions

### `extendLabels`

Function.

Extend the dictionary with a layer's own keys (the chat layer does).

```ts
function extendLabels<T extends Record<string, unknown>>(
  extra: T,
): { addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string } & T
```

**Type parameters**

- `T` (`extends Record<string, unknown>`)

**Parameters**

- `extra` (`T`): The layer's own keys.

**Returns** `{ addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string } & T`: The default labels merged with `extra`.

Source: [ui/src/labels.tsx:174](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L174)

### `useLabels`

Function.

Returns the label dictionary in effect: [`DEFAULT_LABELS`](https://zidane.si/docs/reference/ui-labels.md#DEFAULT_LABELS) plus any overrides from a
parent [`LabelsProvider`](https://zidane.si/docs/reference/ui-labels.md#LabelsProvider).

```ts
function useLabels(): { addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }
```

**Returns** `{ addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }`: The labels.

Source: [ui/src/labels.tsx:164](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L164)

## Constants

### `DEFAULT_LABELS`

Constant.

The default English dictionary of every user-visible string the kit renders. Strings are
grouped by component; a function entry takes the values the string needs, so word order
stays with the translation.

```ts
const DEFAULT_LABELS: { addDiagnosticToChat: (message: string) => string; address: string; addressPlaceholder: string; addToChat: string; back: string; cancel: string; close: string; closeTab: (name: string) => string; code: string; completionSuggestions: string; confirm: string; continue: string; copied: string; copy: string; copyCode: string; copyImage: string; copyImageBase64: string; copyImageDataUrl: string; current: string; diagnosticsCheckedBy: (source: string) => string; diagnosticsChecking: string; diagnosticsNone: string; editorConflict: string; editorConflictDetail: string; editorEmpty: string; editorOverwrite: string; editorReadFailed: (message: string) => string; editorReload: string; errorFailed: (region: string) => string; errorStack: string; errorTryAgain: string; filePath: (path: string) => string; fileReadOnly: (path: string) => string; fileTree: string; fileUnsaved: string; fileUnsavedTitle: (path: string) => string; findClose: string; findCloseHint: string; findInFile: string; findMatchCase: string; findNext: string; findNextHint: string; findNoResults: string; findPrevious: string; findPreviousHint: string; findReferences: string; goToDefinition: string; goToStep: (step: string) => string; loading: string; modalBack: string; modalFailed: string; next: string; noReferences: string; of: (index: number, count: number) => string; openFiles: string; openInNewTab: string; paletteBack: string; paletteBackHint: string; paletteChoose: string; paletteEmpty: string; paletteFilter: string; paletteLabel: string; paletteLoading: string; paletteNoMatch: (query: string) => string; paletteOpen: string; paletteRun: string; paletteScopeHint: string; paletteTurnOff: string; paletteTurnOn: string; previous: string; reload: string; rename: string; retry: string; screenBack: (screen: string) => string; screenBackKey: string; signInCopyCode: string; signInDone: (account?: string) => string; signInEnterCode: (host: string) => string; signInFailed: string; signInInBrowser: (service: string) => string; signInNotOpened: string; signInOpenPage: string; signInPaste: string; signInStarting: string; signInSubmit: string; skip: string; stepOf: (index: number, count: number) => string; steps: string; terminal: string; terminalExited: (code: number) => string; terminalLoadFailed: (message: string) => string; working: string; wrapLines: string; zoomFit: string; zoomPercent: (percent: number) => string }
```

Source: [ui/src/labels.tsx:17](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L17)

## Interfaces

### `LabelsProviderProps`

Interface.

Props for [`LabelsProvider`](https://zidane.si/docs/reference/ui-labels.md#LabelsProvider).

```ts
interface LabelsProviderProps<L extends object = Labels>
```

**Type parameters**

- `L` (`extends object`, default `Labels`)

**Properties**

- `children` (`ReactNode`): The tree that reads the labels.
- `labels?` (`Partial<L>`): Keys to override, such as a translation. Merged over the parent provider's labels.

Source: [ui/src/labels.tsx:135](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L135)

## Types

### `LabelOverrides`

Type.

Some keys of a label dictionary, for overriding them while keeping the others. A layer with its
own keys passes its dictionary type (`LabelOverrides<ChatLabels>`).

```ts
type LabelOverrides<L extends object = Labels> = Partial<L>
```

**Type parameters**

- `L` (`extends object`, default `Labels`)

Source: [ui/src/labels.tsx:132](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L132)

### `Labels`

Type.

The shape of the label dictionary: the keys of [`DEFAULT_LABELS`](https://zidane.si/docs/reference/ui-labels.md#DEFAULT_LABELS).

```ts
type Labels = typeof DEFAULT_LABELS
```

Source: [ui/src/labels.tsx:127](https://github.com/Tahul/zidane/blob/main/ui/src/labels.tsx#L127)
