# Translation

**`sonic-t`** renders a translated label in plain HTML. It is the markup counterpart of the [t()](/docs/directives/t) directive and shares its endpoint, batching and cache.

## Basic example

Set `serviceURL` and `wordingProvider` on an ancestor, then give each `sonic-t` a `key`. Labels requested together are fetched in one call.

<sonic-code>
  <template>
    <div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
      <p><sonic-t key="flight.boarding"></sonic-t></p>
    </div>
  </template>
</sonic-code>

## HTML labels

The label is escaped by default. Add `unsafeHTML` for labels that contain trusted markup.

<sonic-code>
  <template>
    <div serviceURL="/docs-mock-api" wordingProvider="wording/labels?lang=fr">
      <p><sonic-t key="flight.gate" unsafeHTML></sonic-t></p>
    </div>
  </template>
</sonic-code>

Endpoint format, reloading on `<html lang>` change and `wordingVersionProvider` are described on the [t()](/docs/directives/t) page.

## API reference

| Attribute | Values | Description |
|-----------|--------|-------------|
| `key` | string | Label key. Renders nothing while empty |
| `unsafeHTML` | boolean | Renders the label as HTML instead of text |

No slots.
