diff --git a/.changeset/inline-bold-localization-markup.md b/.changeset/inline-bold-localization-markup.md
new file mode 100644
index 00000000000..72a197e739d
--- /dev/null
+++ b/.changeset/inline-bold-localization-markup.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for inline `<bold>` markup in localization values, rendered as `<strong>` elements. Translators can now write `'Agree to <bold>Terms</bold>'` in a single key instead of splitting into prefix/bold/suffix fragments. Token values are substituted only into parsed text leaves, so user-controlled data can never become markup. Also hardens `applyTokensToString` to use `Object.prototype.hasOwnProperty.call` when filtering token names, preventing prototype-chain names like `{{hasOwnProperty}}` from crashing rendering.
diff --git a/packages/ui/src/localization/__tests__/applyMarkupToNodes.test.tsx b/packages/ui/src/localization/__tests__/applyMarkupToNodes.test.tsx
new file mode 100644
index 00000000000..04b1c13238b
--- /dev/null
+++ b/packages/ui/src/localization/__tests__/applyMarkupToNodes.test.tsx
@@ -0,0 +1,408 @@
+import type { ReactNode } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import type { Tokens } from '../applyTokensToString';
+import { applyMarkupAndTokens, stripMarkup } from '../applyMarkupToNodes';
+
+const html = (node: ReactNode) => renderToStaticMarkup(node as any);
+
+const tokens = {
+  applicationName: 'Acme',
+  'user.firstName': 'Nikos',
+} as unknown as Tokens;
+
+const withToken = (key: string, value: string): Tokens => ({ ...tokens, [key]: value }) as unknown as Tokens;
+
+// The parser's safety property: when rendered to HTML, the output contains
+// no real elements other than <strong>. Anything else — script/img/iframe/svg/
+// a/style/onerror=/javascript: — can only appear as text content, which means
+// it was HTML-entity-escaped by React and is inert.
+const ALLOWED_TAGS = new Set(['strong']);
+const TAG_NAME_RE = /<\/?([a-zA-Z][a-zA-Z0-9-]*)/g;
+
+const expectSafeHtml = (out: string) => {
+  const matches = out.matchAll(TAG_NAME_RE);
+  for (const m of matches) {
+    expect(ALLOWED_TAGS, `unexpected tag <${m[1]}> in output: ${out}`).toContain(m[1].toLowerCase());
+  }
+};
+
+describe('applyMarkupAndTokens', () => {
+  describe('plain strings (no markup)', () => {
+    it('returns empty string for undefined', () => {
+      expect(applyMarkupAndTokens(undefined, tokens)).toBe('');
+    });
+
+    it('returns empty string for empty input', () => {
+      expect(applyMarkupAndTokens('', tokens)).toBe('');
+    });
+
+    it('passes plain text through token substitution', () => {
+      expect(applyMarkupAndTokens('Welcome to {{applicationName}}', tokens)).toBe('Welcome to Acme');
+    });
+
+    it('preserves stray angle brackets that are not allowlisted tags', () => {
+      expect(html(applyMarkupAndTokens('1 < 2 and 3 > 2', tokens))).toBe('1 &lt; 2 and 3 &gt; 2');
+    });
+
+    it('preserves unknown tag names as literal text', () => {
+      expect(html(applyMarkupAndTokens('Hello <script>x</script>', tokens))).toBe(
+        'Hello &lt;script&gt;x&lt;/script&gt;',
+      );
+    });
+  });
+
+  describe('bold tag rendering', () => {
+    it('wraps inner text in <strong>', () => {
+      expect(html(applyMarkupAndTokens('Press <bold>OK</bold>', tokens))).toBe('Press <strong>OK</strong>');
+    });
+
+    it('supports multiple bold spans in one string', () => {
+      expect(html(applyMarkupAndTokens('Open <bold>Settings</bold> then <bold>Profile</bold>', tokens))).toBe(
+        'Open <strong>Settings</strong> then <strong>Profile</strong>',
+      );
+    });
+
+    it('substitutes tokens inside bold content', () => {
+      expect(html(applyMarkupAndTokens('Hello <bold>{{user.firstName}}</bold>', tokens))).toBe(
+        'Hello <strong>Nikos</strong>',
+      );
+    });
+
+    it('substitutes tokens in text outside bold', () => {
+      expect(html(applyMarkupAndTokens('Welcome to {{applicationName}}, click <bold>OK</bold>', tokens))).toBe(
+        'Welcome to Acme, click <strong>OK</strong>',
+      );
+    });
+  });
+
+  describe('security — injection resistance', () => {
+    it('escapes script-like token values (no XSS via token)', () => {
+      const evilTokens = { ...tokens, 'user.firstName': '<script>alert(1)</script>' } as Tokens;
+      expect(html(applyMarkupAndTokens('Hi {{user.firstName}}', evilTokens))).toBe(
+        'Hi &lt;script&gt;alert(1)&lt;/script&gt;',
+      );
+    });
+
+    it('does not re-parse tag-like token values into elements', () => {
+      const evilTokens = { ...tokens, 'user.firstName': '<bold>pwned</bold>' } as Tokens;
+      expect(html(applyMarkupAndTokens('Hi {{user.firstName}}', evilTokens))).toBe('Hi &lt;bold&gt;pwned&lt;/bold&gt;');
+    });
+
+    it('does not re-parse tag-like token values when token is inside bold', () => {
+      const evilTokens = { ...tokens, 'user.firstName': '<bold>pwned</bold>' } as Tokens;
+      expect(html(applyMarkupAndTokens('Hello <bold>{{user.firstName}}</bold>', evilTokens))).toBe(
+        'Hello <strong>&lt;bold&gt;pwned&lt;/bold&gt;</strong>',
+      );
+    });
+
+    it('rejects tags with attributes (does not match)', () => {
+      expect(html(applyMarkupAndTokens('Click <bold onclick="alert(1)">OK</bold>', tokens))).toBe(
+        'Click &lt;bold onclick=&quot;alert(1)&quot;&gt;OK&lt;/bold&gt;',
+      );
+    });
+
+    it('rejects tags with whitespace', () => {
+      expect(html(applyMarkupAndTokens('Click <bold >OK</bold>', tokens))).toBe('Click &lt;bold &gt;OK&lt;/bold&gt;');
+    });
+
+    it('escapes javascript: in token values inside bold', () => {
+      const evilTokens = { ...tokens, 'user.firstName': 'javascript:alert(1)' } as Tokens;
+      expect(html(applyMarkupAndTokens('<bold>{{user.firstName}}</bold>', evilTokens))).toBe(
+        '<strong>javascript:alert(1)</strong>',
+      );
+    });
+  });
+
+  describe('malformed input — safe fallback', () => {
+    it('falls back to plain text for unclosed bold tag', () => {
+      expect(html(applyMarkupAndTokens('Press <bold>OK', tokens))).toBe('Press &lt;bold&gt;OK');
+    });
+
+    it('falls back to plain text for stray closing tag', () => {
+      expect(html(applyMarkupAndTokens('Press OK</bold>', tokens))).toBe('Press OK&lt;/bold&gt;');
+    });
+
+    it('falls back to plain text for mismatched nesting', () => {
+      // Same tag self-nested without proper closing — treated as malformed.
+      expect(html(applyMarkupAndTokens('<bold>a<bold>b</bold>', tokens))).toBe(
+        '&lt;bold&gt;a&lt;bold&gt;b&lt;/bold&gt;',
+      );
+    });
+
+    it('still applies tokens in the fallback path', () => {
+      expect(html(applyMarkupAndTokens('Press <bold>{{applicationName}}', tokens))).toBe('Press &lt;bold&gt;Acme');
+    });
+  });
+});
+
+describe('stripMarkup', () => {
+  it('removes opening and closing bold tags, preserves text', () => {
+    expect(stripMarkup('Press <bold>OK</bold>')).toBe('Press OK');
+  });
+
+  it('leaves strings without markup unchanged', () => {
+    expect(stripMarkup('No markup here')).toBe('No markup here');
+  });
+
+  it('does not strip non-allowlisted tags', () => {
+    expect(stripMarkup('<script>x</script>')).toBe('<script>x</script>');
+  });
+});
+
+describe('security — adversarial inputs', () => {
+  describe('tag-name evasion', () => {
+    it('rejects fullwidth Unicode angle brackets', () => {
+      const out = html(applyMarkupAndTokens('＜bold＞OK＜/bold＞', tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong>');
+    });
+
+    it('rejects zero-width space inside opening tag', () => {
+      const out = html(applyMarkupAndTokens('<​bold>OK</bold>', tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong>');
+    });
+
+    it.each(['<BOLD>OK</BOLD>', '<Bold>OK</Bold>', '<bOlD>OK</bOlD>'])('rejects case variant %s', input => {
+      const out = html(applyMarkupAndTokens(input, tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong>');
+    });
+
+    it('rejects doubled angle brackets around tag', () => {
+      const out = html(applyMarkupAndTokens('<<bold>>OK<</bold>>', tokens));
+      expectSafeHtml(out);
+    });
+
+    it('rejects self-closing form', () => {
+      const out = html(applyMarkupAndTokens('Hi <bold/>', tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong');
+    });
+  });
+
+  describe('attribute and prop injection', () => {
+    it.each([
+      '<bold style="color:red">x</bold>',
+      '<bold data-x="y">x</bold>',
+      '<bold\t>x</bold>',
+      '<bold\n>x</bold>',
+      '<bold class="evil">x</bold>',
+      '<bold id="evil">x</bold>',
+    ])('rejects attributes/whitespace: %s', input => {
+      const out = html(applyMarkupAndTokens(input, tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong');
+    });
+
+    it('escapes JSX-prop-shaped literal text in template', () => {
+      expectSafeHtml(html(applyMarkupAndTokens('Hi" dangerouslySetInnerHTML={{__html: x}}', tokens)));
+    });
+
+    it('escapes JSX-prop-shaped token value', () => {
+      const evilTokens = withToken('user.firstName', '" dangerouslySetInnerHTML={{__html:"<script>x</script>"}}');
+      expectSafeHtml(html(applyMarkupAndTokens('Hi {{user.firstName}}', evilTokens)));
+      expectSafeHtml(html(applyMarkupAndTokens('Hi <bold>{{user.firstName}}</bold>', evilTokens)));
+    });
+  });
+
+  describe('disallowed tags must never appear', () => {
+    it.each([
+      '<script>alert(1)</script>',
+      '<img src=x onerror=alert(1)>',
+      '<svg/onload=alert(1)>',
+      '<a href="javascript:alert(1)">x</a>',
+      '<iframe src="javascript:alert(1)"></iframe>',
+      '<math><mtext></mtext></math>',
+      '<base href="javascript:alert(1)">',
+      '<meta http-equiv="refresh" content="0;url=javascript:alert(1)">',
+      '<link rel="stylesheet" href="x">',
+      '<style>body{}</style>',
+      '<object data="javascript:alert(1)"></object>',
+      '<embed src="javascript:alert(1)">',
+    ])('strips/escapes %s', input => {
+      expectSafeHtml(html(applyMarkupAndTokens(input, tokens)));
+    });
+  });
+
+  describe('token-value payloads', () => {
+    const payloads = [
+      '<script>alert(1)</script>',
+      '<bold>pwned</bold>',
+      'javascript:alert(1)',
+      '" autofocus onfocus="alert(1)',
+      '<img src=x onerror=alert(1)>',
+      '</strong><script>alert(1)</script>',
+      '<bold\x00>x</bold\x00>',
+      '_++user.firstName++_',
+      '$&',
+      '$1',
+      '$$',
+      '<svg/onload=alert(1)>',
+    ];
+
+    it.each(payloads)('token outside bold: %s', payload => {
+      const evilTokens = withToken('user.firstName', payload);
+      expectSafeHtml(html(applyMarkupAndTokens('Hi {{user.firstName}}', evilTokens)));
+    });
+
+    it.each(payloads)('token inside bold: %s', payload => {
+      const evilTokens = withToken('user.firstName', payload);
+      expectSafeHtml(html(applyMarkupAndTokens('Hi <bold>{{user.firstName}}</bold>', evilTokens)));
+    });
+
+    it.each(payloads)('token as entire template: %s', payload => {
+      const evilTokens = withToken('user.firstName', payload);
+      expectSafeHtml(html(applyMarkupAndTokens('{{user.firstName}}', evilTokens)));
+    });
+  });
+
+  describe('DoS shapes complete in bounded time', () => {
+    it('1000 unmatched opening bold tags falls back without hanging', () => {
+      const input = '<bold>'.repeat(1000) + 'x';
+      const start = Date.now();
+      const out = html(applyMarkupAndTokens(input, tokens));
+      expect(Date.now() - start).toBeLessThan(500);
+      expectSafeHtml(out);
+    });
+
+    it('1000 alternating bold pairs render as 1000 strong elements', () => {
+      const input = '<bold>x</bold>'.repeat(1000);
+      const start = Date.now();
+      const out = html(applyMarkupAndTokens(input, tokens));
+      expect(Date.now() - start).toBeLessThan(500);
+      expectSafeHtml(out);
+      const strongCount = (out.match(/<strong>/g) || []).length;
+      expect(strongCount).toBe(1000);
+    });
+
+    it('100KB of stray < characters completes safely', () => {
+      const input = '<'.repeat(100_000);
+      const start = Date.now();
+      const out = html(applyMarkupAndTokens(input, tokens));
+      expect(Date.now() - start).toBeLessThan(500);
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong');
+    });
+  });
+
+  describe('SSR determinism', () => {
+    it('same input renders byte-for-byte identical HTML', () => {
+      const template = 'Welcome to <bold>{{applicationName}}</bold>, {{user.firstName}}';
+      const a = html(applyMarkupAndTokens(template, tokens));
+      const b = html(applyMarkupAndTokens(template, tokens));
+      expect(a).toBe(b);
+    });
+
+    it('keys remain stable across renders so React hydration is consistent', () => {
+      const template = '<bold>a</bold> and <bold>b</bold> and <bold>c</bold>';
+      const a = html(applyMarkupAndTokens(template, tokens));
+      const b = html(applyMarkupAndTokens(template, tokens));
+      expect(a).toBe(b);
+    });
+
+    it('structural identity holds whether tokens are populated or empty', () => {
+      const template = 'Hi <bold>{{user.firstName}}</bold>';
+      const populated = html(applyMarkupAndTokens(template, tokens));
+      const empty = html(applyMarkupAndTokens(template, {} as Tokens));
+      const strongCount = (s: string) => (s.match(/<strong/g) || []).length;
+      expect(strongCount(populated)).toBe(strongCount(empty));
+    });
+  });
+
+  describe('module state isolation', () => {
+    it('regex lastIndex resets after a malformed-input early return', () => {
+      // Malformed input takes the early-return fallback path.
+      html(applyMarkupAndTokens('Press <bold>OK', tokens));
+      // Subsequent valid input must still parse correctly.
+      expect(html(applyMarkupAndTokens('Hi <bold>x</bold>', tokens))).toBe('Hi <strong>x</strong>');
+    });
+
+    it('sequential calls with mixed valid/invalid inputs all behave independently', () => {
+      const inputs = [
+        'Hi <bold>a</bold>',
+        'Press <bold>OK',
+        'plain text',
+        '<bold>b</bold><bold>c</bold>',
+        'Hi {{user.firstName}}',
+        '<bold>{{applicationName}}</bold>',
+      ];
+      for (const input of inputs) {
+        expectSafeHtml(html(applyMarkupAndTokens(input, tokens)));
+      }
+      // After mixed inputs, the regex state must still allow correct matching.
+      expect(html(applyMarkupAndTokens('<bold>final</bold>', tokens))).toBe('<strong>final</strong>');
+    });
+  });
+
+  describe('absence assertion baseline', () => {
+    const inputs = [
+      '',
+      'plain',
+      '<bold>x</bold>',
+      'Hi {{user.firstName}}',
+      'Hi <bold>{{user.firstName}}</bold>',
+      '<script>x</script>',
+      '<bold onclick="x">y</bold>',
+      'Press <bold>OK',
+      '</bold>',
+      '<bold>a<bold>b</bold>',
+    ];
+    it.each(inputs)('no disallowed tags in output for: %s', input => {
+      expectSafeHtml(html(applyMarkupAndTokens(input, tokens)));
+    });
+  });
+
+  describe('defense in depth — invariant pinning', () => {
+    it('deeply nested bolds produce only <strong> elements', () => {
+      const out = html(applyMarkupAndTokens('<bold><bold><bold>x</bold></bold></bold>', tokens));
+      expectSafeHtml(out);
+      expect(out).toBe('<strong><strong><strong>x</strong></strong></strong>');
+    });
+
+    it('HTML-entity-encoded tags do not become elements', () => {
+      const out = html(applyMarkupAndTokens('&lt;bold&gt;OK&lt;/bold&gt;', tokens));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong');
+    });
+
+    it('token name resolving to a tag-shaped string renders as text only', () => {
+      const evil = withToken('tagName', 'script');
+      const out = html(applyMarkupAndTokens('<{{tagName}}>x</{{tagName}}>', evil));
+      expectSafeHtml(out);
+      expect(out).not.toContain('<strong');
+    });
+
+    it.each(['__proto__', 'toString', 'constructor', 'hasOwnProperty'])(
+      'prototype-chain token name %s does not produce dangerous output',
+      name => {
+        const out = html(applyMarkupAndTokens(`Hi {{${name}}}`, tokens));
+        expectSafeHtml(out);
+      },
+    );
+
+    it.each(['<boldx>OK</boldx>', '<bolder>OK</bolder>', '<bold123>OK</bold123>'])(
+      'tag-name prefix %s does not match the bold allowlist',
+      input => {
+        const out = html(applyMarkupAndTokens(input, tokens));
+        expectSafeHtml(out);
+        expect(out).not.toContain('<strong');
+      },
+    );
+
+    it('empty bold produces an empty <strong>', () => {
+      const out = html(applyMarkupAndTokens('<bold></bold>', tokens));
+      expectSafeHtml(out);
+      expect(out).toBe('<strong></strong>');
+    });
+
+    it('bold wrapping a token that resolves to empty still renders safely', () => {
+      const evil = withToken('user.firstName', '');
+      const out = html(applyMarkupAndTokens('<bold>{{user.firstName}}</bold>', evil));
+      expectSafeHtml(out);
+      expect(out).toBe('<strong></strong>');
+    });
+  });
+});
diff --git a/packages/ui/src/localization/__tests__/makeLocalizable.test.tsx b/packages/ui/src/localization/__tests__/makeLocalizable.test.tsx
index 5a897b76ff8..3c09d169248 100644
--- a/packages/ui/src/localization/__tests__/makeLocalizable.test.tsx
+++ b/packages/ui/src/localization/__tests__/makeLocalizable.test.tsx
@@ -1,7 +1,9 @@
+import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, renderHook, screen } from '@/test/utils';
+import { OptionsProvider } from '@/ui/contexts';
 import {
   Badge,
   Button,
@@ -138,3 +140,76 @@ describe('Test localizable components', () => {
     ).toBe('form_identifier_exists__email_address');
   });
 });
+
+describe('Inline markup in localization values', () => {
+  it('renders <bold> as a <strong> element inside a localizable component', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: { backButton: 'Press <bold>OK</bold> to go back' } }}>
+          {children}
+        </OptionsProvider>
+      </Wrapper>
+    );
+
+    const { container } = render(<Text localizationKey={localizationKeys('backButton')} />, { wrapper });
+
+    const strong = container.querySelector('strong');
+    expect(strong).not.toBeNull();
+    expect(strong?.textContent).toBe('OK');
+    expect(container.textContent).toBe('Press OK to go back');
+  });
+
+  it('substitutes tokens inside <bold>', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: { backButton: 'Welcome to <bold>{{applicationName}}</bold>' } }}>
+          {children}
+        </OptionsProvider>
+      </Wrapper>
+    );
+
+    const { container } = render(<Text localizationKey={localizationKeys('backButton')} />, { wrapper });
+
+    const strong = container.querySelector('strong');
+    expect(strong).not.toBeNull();
+    expect(container.textContent).toContain('Welcome to');
+    // applicationName comes from the fixture environment; we only assert the tag wraps non-empty text.
+    expect(strong?.textContent?.length).toBeGreaterThan(0);
+  });
+
+  it('does not render <strong> when token value contains tag-like text', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <Wrapper>
+        <OptionsProvider
+          value={{
+            localization: {
+              backButton: 'Hi {{applicationName}}',
+            },
+          }}
+        >
+          {children}
+        </OptionsProvider>
+      </Wrapper>
+    );
+
+    // The fixture's applicationName is plain text; the safety property we care about is
+    // that token values are NEVER re-parsed as markup. We assert no <strong> appears.
+    const { container } = render(<Text localizationKey={localizationKeys('backButton')} />, { wrapper });
+    expect(container.querySelector('strong')).toBeNull();
+  });
+
+  it('t() returns a plain string with markup tags stripped', async () => {
+    const { wrapper: Wrapper } = await createFixtures();
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <Wrapper>
+        <OptionsProvider value={{ localization: { backButton: 'Press <bold>OK</bold>' } }}>{children}</OptionsProvider>
+      </Wrapper>
+    );
+
+    const { result } = renderHook(() => useLocalizations(), { wrapper });
+    expect(result.current.t(localizationKeys('backButton'))).toBe('Press OK');
+  });
+});
diff --git a/packages/ui/src/localization/applyMarkupToNodes.tsx b/packages/ui/src/localization/applyMarkupToNodes.tsx
new file mode 100644
index 00000000000..b17ad89179d
--- /dev/null
+++ b/packages/ui/src/localization/applyMarkupToNodes.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { createElement, Fragment } from 'react';
+
+import { applyTokensToString, type Tokens } from './applyTokensToString';
+
+const TAGS = {
+  bold: 'strong',
+} as const;
+
+type TagName = keyof typeof TAGS;
+
+const TAG_RE = /<(\/?)(bold)>/g;
+
+export const stripMarkup = (s: string): string => s.replace(/<\/?(bold)>/g, '');
+
+export const applyMarkupAndTokens = (template: string | undefined, tokens: Tokens): ReactNode => {
+  if (!template) return '';
+  const substitute = (s: string) => (s.includes('{{') ? applyTokensToString(s, tokens) : s);
+  if (!template.includes('<')) {
+    return substitute(template);
+  }
+
+  type Frame = { tag: TagName | 'root'; children: ReactNode[] };
+  const stack: Frame[] = [{ tag: 'root', children: [] }];
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+
+  TAG_RE.lastIndex = 0;
+  while ((match = TAG_RE.exec(template)) !== null) {
+    const [full, slash, tag] = match;
+    const text = template.slice(cursor, match.index);
+    if (text) stack[stack.length - 1].children.push(substitute(text));
+    cursor = match.index + full.length;
+
+    if (!slash) {
+      stack.push({ tag: tag as TagName, children: [] });
+      continue;
+    }
+
+    const top = stack.pop();
+    if (!top || top.tag !== tag) {
+      return substitute(template);
+    }
+    stack[stack.length - 1].children.push(
+      createElement(TAGS[top.tag as TagName], { key: match.index }, ...top.children),
+    );
+  }
+
+  if (stack.length !== 1) {
+    return substitute(template);
+  }
+
+  const tail = template.slice(cursor);
+  if (tail) stack[0].children.push(substitute(tail));
+
+  const out = stack[0].children;
+  if (out.length === 0) return '';
+  if (out.length === 1) return out[0];
+  return createElement(Fragment, null, ...out);
+};
diff --git a/packages/ui/src/localization/applyTokensToString.ts b/packages/ui/src/localization/applyTokensToString.ts
index 031a79d3865..9097b7efe8c 100644
--- a/packages/ui/src/localization/applyTokensToString.ts
+++ b/packages/ui/src/localization/applyTokensToString.ts
@@ -53,7 +53,7 @@ const parseTokensFromLocalizedString = (
   const matches = (s.match(/{{.+?}}/g) || []).map(m => m.replace(/[{}]/g, ''));
   const parsedMatches = matches.map(m => m.split('|').map(m => m.trim()));
   const expressions = parsedMatches
-    .filter(match => match[0] in tokens)
+    .filter(match => Object.prototype.hasOwnProperty.call(tokens, match[0]))
     .map(([token, ...modifiers]) => ({
       token,
       modifiers: modifiers.map(m => getModifierWithParams(m)).filter(m => assertKnownModifier(m.modifierName)),
diff --git a/packages/ui/src/localization/makeLocalizable.tsx b/packages/ui/src/localization/makeLocalizable.tsx
index f259e490e8f..8716279492c 100644
--- a/packages/ui/src/localization/makeLocalizable.tsx
+++ b/packages/ui/src/localization/makeLocalizable.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import { useOptions } from '../contexts';
 import { readObjectPath } from '../utils/readObjectPath';
+import { applyMarkupAndTokens, stripMarkup } from './applyMarkupToNodes';
 import type { GlobalTokens } from './applyTokensToString';
 import { applyTokensToString, useGlobalTokens } from './applyTokensToString';
 import { defaultResource } from './defaultEnglishResource';
@@ -49,7 +50,7 @@ export const makeLocalizable = <P,>(Component: React.FunctionComponent<P>): Loca
         ref={ref}
         data-localization-key={localizationKeyAttribute(localizationKey)}
       >
-        {localizedStringFromKey(localizationKey, parsedResource, globalTokens) || restProps.children}
+        {localizedNodeFromKey(localizationKey, parsedResource, globalTokens) || restProps.children}
       </Component>
     );
   });
@@ -68,7 +69,7 @@ export const useLocalizations = () => {
     if (!localizationKey || typeof localizationKey === 'string') {
       return localizationKey || '';
     }
-    return localizedStringFromKey(localizationKey, parsedResource, globalTokens);
+    return stripMarkup(localizedStringFromKey(localizationKey, parsedResource, globalTokens));
   };
 
   /**
@@ -110,14 +111,25 @@ const localizationKeyAttribute = (localizationKey: LocalizationKey) => {
   return localizationKey.key;
 };
 
+const resolveKey = (localizationKey: LocalizationKey, resource: LocalizationResource, globalTokens: GlobalTokens) => ({
+  base: readObjectPath(resource, localizationKey.key) as string,
+  tokens: { ...globalTokens, ...localizationKey.params },
+});
+
 const localizedStringFromKey = (
   localizationKey: LocalizationKey,
   resource: LocalizationResource,
   globalTokens: GlobalTokens,
 ): string => {
-  const key = localizationKey.key;
-  const base = readObjectPath(resource, key) as string;
-  const params = localizationKey.params;
-  const tokens = { ...globalTokens, ...params };
+  const { base, tokens } = resolveKey(localizationKey, resource, globalTokens);
   return applyTokensToString(base || '', tokens);
 };
+
+const localizedNodeFromKey = (
+  localizationKey: LocalizationKey,
+  resource: LocalizationResource,
+  globalTokens: GlobalTokens,
+) => {
+  const { base, tokens } = resolveKey(localizationKey, resource, globalTokens);
+  return applyMarkupAndTokens(base, tokens);
+};