General Add Localization

Key naming rules

• Group: camelCase feature name (e.g., actions, general, content, media, user)
• Term: camelCase descriptive name (e.g., assignDomain, auditTrail, browse)
• Full key used in code: group_termName (underscore separator)
• Add to an existing group when the text belongs to that feature area
• Create a new group only for new feature areas

Value types

Step 2: Use the localized text

In element templates — this.localize.term()

Available on any class extending UmbLitElement. The localize property is provided automatically.

import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

@customElement('umb-my-element')
export class UmbMyElement extends UmbLitElement {
	override render() {
		return html`
			<uui-button label=${this.localize.term('myFeature_myLabel')}></uui-button>
		`;
	}
}

In templates — <umb-localize> element

For inline localized text in HTML templates:

<umb-localize key="myFeature_myLabel"></umb-localize>

<!-- With fallback text (shown if key is missing) -->
<umb-localize key="myFeature_myLabel">Fallback text</umb-localize>

In controllers or non-element classes — UmbLocalizationController

import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';

export class UmbMyManager extends UmbControllerBase {
	readonly #localization = new UmbLocalizationController(this);

	someMethod() {
		const label = this.#localization.term('myFeature_myLabel');
	}
}

Checklist

• Key added to src/assets/lang/en.ts in the correct group
• Key follows group_termName convention (camelCase, underscore separator)
• Used this.localize.term() in elements or UmbLocalizationController in non-elements
• No hardcoded user-facing strings remain
• Compiles: npm run compile