diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24f3e01cb0f..b17ad542c08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.7.4`.
+- Converted a number of components to support text localization ([#1485](https://github.com/elastic/eui/pull/1485))
 
 ## [`6.7.4`](https://github.com/elastic/eui/tree/v6.7.4)
 
diff --git a/package.json b/package.json
index 11402d7a504..66945f518d5 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-ace": "^5.5.0",
     "react-color": "^2.13.8",
     "react-input-autosize": "^2.2.1",
+    "react-is": "~16.3.0",
     "react-virtualized": "^9.18.5",
     "react-vis": "1.10.2",
     "resize-observer-polyfill": "^1.5.0",
@@ -76,6 +77,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.9",
     "@types/react": "^16.3.0",
+    "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
     "autoprefixer": "^7.1.5",
diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js
index 15dbd24c382..7e4122fe1d7 100644
--- a/src/components/bottom_bar/bottom_bar.js
+++ b/src/components/bottom_bar/bottom_bar.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { EuiPortal } from '../portal';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiI18n } from '../i18n';
 
 const paddingSizeToClassNameMap = {
   none: null,
@@ -53,7 +54,10 @@ export class EuiBottomBar extends Component {
       <EuiPortal>
         <EuiScreenReaderOnly>
           <p aria-live="assertive">
-            There is a new menu opening with page level controls at the bottom of the document.
+            <EuiI18n
+              token="euiBottomBar.screenReaderAnnouncement"
+              default="There is a new menu opening with page level controls at the bottom of the document."
+            />
           </p>
         </EuiScreenReaderOnly>
         <div
diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
index e10b3c8ebd4..667d2ff7282 100644
--- a/src/components/code/_code_block.js
+++ b/src/components/code/_code_block.js
@@ -15,6 +15,7 @@ import {
 } from '../overlay_mask';
 
 import { keyCodes } from '../../services';
+import { EuiI18n } from '../i18n';
 
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
@@ -143,14 +144,21 @@ export class EuiCodeBlockImpl extends Component {
 
     if (!inline && overflowHeight) {
       fullScreenButton = (
-        <EuiButtonIcon
-          className="euiCodeBlock__fullScreenButton"
-          size="s"
-          onClick={this.toggleFullScreen}
-          iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
-          color="text"
-          aria-label={this.state.isFullScreen ? 'Collapse' : 'Expand'}
-        />
+        <EuiI18n
+          tokens={['euiCodeBlock.fullscreenCollapse', 'euiCodeBlock.fullscreenExpand']}
+          defaults={['Collapse', 'Expand']}
+        >
+          {([fullscreenCollapse, fullscreenExpand]) => (
+            <EuiButtonIcon
+              className="euiCodeBlock__fullScreenButton"
+              size="s"
+              onClick={this.toggleFullScreen}
+              iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
+              color="text"
+              aria-label={this.state.isFullScreen ? fullscreenCollapse : fullscreenExpand}
+            />
+          )}
+        </EuiI18n>
       );
     }
 
diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
index c1b4ef1b279..a3b2b19c116 100644
--- a/src/components/code_editor/__snapshots__/code_editor.test.js.snap
+++ b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -11,16 +11,12 @@ exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -36,16 +32,12 @@ exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace b
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -61,16 +53,12 @@ exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -95,7 +83,7 @@ exports[`EuiCodeEditor is rendered 1`] = `
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -211,7 +199,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -327,7 +315,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -443,7 +431,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop interacting with the code.
+      When you're done, press Escape to stop interacting with the code.
     </p>
   </div>
   <div
diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js
index 853cadaca36..1364829e648 100644
--- a/src/components/code_editor/code_editor.js
+++ b/src/components/code_editor/code_editor.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import AceEditor from 'react-ace';
 
 import { htmlIdGenerator, keyCodes } from '../../services';
+import { EuiI18n } from '../i18n';
 
 function setOrRemoveAttribute(element, attributeName, value) {
   if (value === null || value === undefined) {
@@ -141,11 +142,6 @@ export class EuiCodeEditor extends Component {
       filteredCursorStart = cursorStart;
     }
 
-    const activity = isReadOnly
-      ? 'interacting with the code'
-      : 'editing';
-
-
     // Don't use EuiKeyboardAccessible here because it doesn't play nicely with onKeyDown.
     const prompt = (
       <div
@@ -159,11 +155,39 @@ export class EuiCodeEditor extends Component {
         data-test-subj="codeEditorHint"
       >
         <p className="euiText">
-          Press Enter to start {activity}.
+          {
+            isReadOnly
+              ? (
+                <EuiI18n
+                  token="euiCodeEditor.startInteracting"
+                  default="Press Enter to start interacting with the code."
+                />
+              )
+              : (
+                <EuiI18n
+                  token="euiCodeEditor.startEditing"
+                  default="Press Enter to start editing."
+                />
+              )
+          }
         </p>
 
         <p className="euiText">
-          When you&rsquo;re done, press Escape to stop {activity}.
+          {
+            isReadOnly
+              ? (
+                <EuiI18n
+                  token="euiCodeEditor.stopInteracting"
+                  default="When you're done, press Escape to stop interacting with the code."
+                />
+              )
+              : (
+                <EuiI18n
+                  token="euiCodeEditor.stopEditing"
+                  default="When you're done, press Escape to stop editing."
+                />
+              )
+          }
         </p>
       </div>
     );
diff --git a/src/components/color_picker/color_picker.js b/src/components/color_picker/color_picker.js
index 0a93aacd53d..a78d5e4b397 100644
--- a/src/components/color_picker/color_picker.js
+++ b/src/components/color_picker/color_picker.js
@@ -8,6 +8,7 @@ import { ChromePicker } from 'react-color';
 import { EuiOutsideClickDetector } from '../outside_click_detector';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
+import { EuiI18n } from '../i18n';
 
 export class EuiColorPicker extends Component {
   constructor(props) {
@@ -30,15 +31,32 @@ export class EuiColorPicker extends Component {
   };
 
   getColorLabel() {
-    const { color } = this.props;
-    const colorValue = color === null ? '(transparent)' : color;
     return (
-      <div
-        className="euiColorPicker__label"
-        aria-label={`Color selection is ${ colorValue }`}
+      <EuiI18n
+        token="euiColorPicker.transparentColor"
+        default="transparent"
       >
-        { colorValue }
-      </div>
+        {transparentColor => {
+          const { color } = this.props;
+          const colorValue = color === null ? `(${transparentColor})` : color;
+          return (
+            <EuiI18n
+              token="euiColorPicker.colorSelectionLabel"
+              default="Color selection is {colorValue}"
+              values={{ colorValue }}
+            >
+              {colorSelectionLabel => (
+                <div
+                  className="euiColorPicker__label"
+                  aria-label={colorSelectionLabel}
+                >
+                  { colorValue }
+                </div>
+              )}
+            </EuiI18n>
+          );
+        }}
+      </EuiI18n>
     );
   }
 
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.js b/src/components/combo_box/combo_box_input/combo_box_pill.js
index 0b61b078bcd..956ad43e297 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.js
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiBadge } from '../../badge';
+import { EuiI18n } from '../../i18n';
 
 export class EuiComboBoxPill extends Component {
   static propTypes = {
@@ -47,23 +48,31 @@ export class EuiComboBoxPill extends Component {
 
     if (onClose) {
       return (
-        <EuiBadge
-          className={classes}
-          title={children}
-          iconOnClick={this.onCloseButtonClick}
-          iconOnClickAriaLabel={`Remove ${children} from selection in this group`}
-          iconType="cross"
-          iconSide="right"
-          color={color}
-          closeButtonProps={{
-            tabIndex: '-1',
-          }}
-          onClick={onClick}
-          onClickAriaLabel={onClickAriaLabel}
-          {...rest}
+        <EuiI18n
+          token="euiComboBoxPill.removeSelection"
+          default="Remove {children} from selection in this group"
+          values={{ children }}
         >
-          {children}
-        </EuiBadge>
+          {removeSelection => (
+            <EuiBadge
+              className={classes}
+              title={children}
+              iconOnClick={this.onCloseButtonClick}
+              iconOnClickAriaLabel={removeSelection}
+              iconType="cross"
+              iconSide="right"
+              color={color}
+              closeButtonProps={{
+                tabIndex: '-1',
+              }}
+              onClick={onClick}
+              onClickAriaLabel={onClickAriaLabel}
+              {...rest}
+            >
+              {children}
+            </EuiBadge>
+          )}
+        </EuiI18n>
       );
     }
 
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
index c8838ae0355..a85242f801f 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -11,6 +11,7 @@ import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxOption } from './combo_box_option';
 import { EuiComboBoxTitle } from './combo_box_title';
+import { EuiI18n } from '../../i18n';
 
 const positionToClassNameMap = {
   top: 'euiComboBoxOptionsList--top',
@@ -129,7 +130,7 @@ export class EuiComboBoxOptionsList extends Component {
             <EuiLoadingSpinner size="m" />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            Loading options
+            <EuiI18n token="euiComboBoxOptionsList.loadingOptions" default="Loading options"/>
           </EuiFlexItem>
         </EuiFlexGroup>
       );
@@ -139,22 +140,48 @@ export class EuiComboBoxOptionsList extends Component {
         if (selectedOptionForValue) {
           // Disallow duplicate custom options.
           emptyStateContent = (
-            <p><strong>{selectedOptionForValue.value}</strong> has already been added</p>
+            <p>
+              <EuiI18n
+                token="euiComboBoxOptionsList.alreadyAdded"
+                default="{label} has already been added"
+                values={{ label: <strong>{selectedOptionForValue.label}</strong> }}
+              />
+            </p>
           );
         } else {
           emptyStateContent = (
-            <p>Hit <EuiCode>ENTER</EuiCode> to add <strong>{searchValue}</strong> as a custom option</p>
+            <p>
+              <EuiI18n
+                token="euiComboBoxOptionsList.createCustomOption"
+                default="Hit {key} to add {searchValue} as a custom option"
+                values={{ key: <EuiCode>ENTER</EuiCode>, searchValue: <strong>{searchValue}</strong> }}
+              />
+            </p>
           );
         }
       } else {
         emptyStateContent = (
-          <p><strong>{searchValue}</strong> doesn&rsquo;t match any options</p>
+          <p>
+            <EuiI18n
+              token="euiComboBoxOptionsList.noMatchingOptions"
+              default="{searchValue} doesn't match any options"
+              values={{ searchValue: <strong>{searchValue}</strong> }}
+            />
+          </p>
         );
       }
     } else if (!options.length) {
-      emptyStateContent = <p>There aren&rsquo;t any options available</p>;
+      emptyStateContent = (
+        <p>
+          <EuiI18n token="euiComboBoxOptionsList.noAvailableOptions" default="There aren't any options available"/>
+        </p>
+      );
     } else if (areAllOptionsSelected) {
-      emptyStateContent = <p>You&rsquo;ve selected all available options</p>;
+      emptyStateContent = (
+        <p>
+          <EuiI18n token="euiComboBoxOptionsList.allOptionsSelected" default="You've selected all available options"/>
+        </p>
+      );
     }
 
     const emptyState = emptyStateContent ? (
diff --git a/src/components/context/context.tsx b/src/components/context/context.tsx
index be1fb75aa3e..7f610ec3421 100644
--- a/src/components/context/context.tsx
+++ b/src/components/context/context.tsx
@@ -1,8 +1,14 @@
 import React, { createContext, ReactChild } from 'react';
 
+export interface RenderableValues {
+  [key: string]: ReactChild;
+}
+
+export type Renderable<T> = ReactChild | ((values: T) => ReactChild);
+
 export interface I18nShape {
   mapping?: {
-    [key: string]: ReactChild;
+    [key: string]: Renderable<any>;
   };
   formatNumber?: (x: number) => string;
   formatDateTime?: (x: Date) => string;
diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js
index 50c3f2f45df..93d2d208723 100644
--- a/src/components/form/file_picker/file_picker.js
+++ b/src/components/form/file_picker/file_picker.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { EuiButtonEmpty } from '../../button';
 import { EuiIcon } from '../../icon';
+import { EuiI18n } from '../../i18n';
 
 export class EuiFilePicker extends Component {
   static propTypes = {
@@ -39,9 +40,9 @@ export class EuiFilePicker extends Component {
     };
   }
 
-  handleChange = () => {
+  handleChange = (filesSelected) => {
     if (this.fileInput.files && this.fileInput.files.length > 1) {
-      this.setState({ promptText: `${this.fileInput.files.length} files selected` });
+      this.setState({ promptText: `${this.fileInput.files.length} ${filesSelected}` });
     } else if (this.fileInput.files.length === 0) {
       this.setState({ promptText: this.props.initialPromptText });
     } else {
@@ -73,92 +74,101 @@ export class EuiFilePicker extends Component {
   };
 
   render() {
-    const {
-      id,
-      name,
-      initialPromptText,
-      className,
-      disabled,
-      compressed,
-      onChange, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
+    return (
+      <EuiI18n
+        tokens={['euiFilePicker.clearSelectedFiles', 'euiFilePicker.filesSelected']}
+        defaults={['Clear selected files', 'files selected']}
+      >
+        {([clearSelectedFiles, filesSelected]) => {
+          const {
+            id,
+            name,
+            initialPromptText,
+            className,
+            disabled,
+            compressed,
+            onChange, // eslint-disable-line no-unused-vars
+            ...rest
+          } = this.props;
 
-    const classes = classNames(
-      'euiFilePicker',
-      {
-        'euiFilePicker__showDrop': this.state.isHoveringDrop,
-        'euiFilePicker--compressed': compressed,
-        'euiFilePicker-hasFiles': this.state.promptText !== initialPromptText,
-      },
-      className
-    );
+          const classes = classNames(
+            'euiFilePicker',
+            {
+              'euiFilePicker__showDrop': this.state.isHoveringDrop,
+              'euiFilePicker--compressed': compressed,
+              'euiFilePicker-hasFiles': this.state.promptText !== initialPromptText,
+            },
+            className
+          );
 
-    let clearButton;
-    if (this.state.promptText !== initialPromptText) {
-      if (compressed) {
-        clearButton = (
-          <button
-            aria-label="Clear selected files"
-            className="euiFilePicker__clearButton"
-            onClick={this.removeFiles}
-          >
-            <EuiIcon
-              className="euiFilePicker__clearIcon"
-              type="cross"
-            />
-          </button>
-        );
-      } else {
-        clearButton = (
-          <EuiButtonEmpty
-            aria-label="Clear selected files"
-            className="euiFilePicker__clearButton"
-            size="xs"
-            onClick={this.removeFiles}
-          >
-            Remove
-          </EuiButtonEmpty>
-        );
-      }
-    } else {
-      clearButton = null;
-    }
+          let clearButton;
+          if (this.state.promptText !== initialPromptText) {
+            if (compressed) {
+              clearButton = (
+                <button
+                  aria-label={clearSelectedFiles}
+                  className="euiFilePicker__clearButton"
+                  onClick={this.removeFiles}
+                >
+                  <EuiIcon
+                    className="euiFilePicker__clearIcon"
+                    type="cross"
+                  />
+                </button>
+              );
+            } else {
+              clearButton = (
+                <EuiButtonEmpty
+                  aria-label={clearSelectedFiles}
+                  className="euiFilePicker__clearButton"
+                  size="xs"
+                  onClick={this.removeFiles}
+                >
+                  Remove
+                </EuiButtonEmpty>
+              );
+            }
+          } else {
+            clearButton = null;
+          }
 
-    return (
-      <div
-        className={classes}
-      >
-        <div className="euiFilePicker__wrap">
-          <input
-            type="file"
-            id={id}
-            name={name}
-            className="euiFilePicker__input"
-            onChange={this.handleChange}
-            ref={(input) => { this.fileInput = input; }}
-            onDragOver={this.showDrop}
-            onDragLeave={this.hideDrop}
-            onDrop={this.hideDrop}
-            disabled={disabled}
-            {...rest}
-          />
-          <div className="euiFilePicker__prompt">
-            <EuiIcon
-              className="euiFilePicker__icon"
-              type="importAction"
-              size={compressed ? 'm' : 'l'}
-              aria-hidden="true"
-            />
+          return (
             <div
-              className="euiFilePicker__promptText"
+              className={classes}
             >
-              {this.state.promptText}
+              <div className="euiFilePicker__wrap">
+                <input
+                  type="file"
+                  id={id}
+                  name={name}
+                  className="euiFilePicker__input"
+                  onChange={() => this.handleChange(filesSelected)}
+                  ref={(input) => { this.fileInput = input; }}
+                  onDragOver={this.showDrop}
+                  onDragLeave={this.hideDrop}
+                  onDrop={this.hideDrop}
+                  disabled={disabled}
+                  {...rest}
+                />
+                <div className="euiFilePicker__prompt">
+                  <EuiIcon
+                    className="euiFilePicker__icon"
+                    type="importAction"
+                    size={compressed ? 'm' : 'l'}
+                    aria-hidden="true"
+                  />
+                  <div
+                    className="euiFilePicker__promptText"
+                  >
+                    {this.state.promptText}
+                  </div>
+                  {clearButton}
+                </div>
+              </div>
             </div>
-            {clearButton}
-          </div>
-        </div>
-      </div>
+          );
+        }}
+      </EuiI18n>
     );
   }
 }
diff --git a/src/components/form/form.js b/src/components/form/form.js
index 0af76cc4d7b..033a1b627cf 100644
--- a/src/components/form/form.js
+++ b/src/components/form/form.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { EuiCallOut } from '../call_out';
+import { EuiI18n } from '../i18n';
 
 export const EuiForm = ({
   children,
@@ -31,13 +32,17 @@ export const EuiForm = ({
 
   if (isInvalid) {
     optionalErrorAlert = (
-      <EuiCallOut
-        className="euiForm__errors"
-        title="Please address the errors in your form."
-        color="danger"
-      >
-        {optionalErrors}
-      </EuiCallOut>
+      <EuiI18n token="euiForm.addressFormErrors" default="Please address the errors in your form.">
+        {addressFormErrors => (
+          <EuiCallOut
+            className="euiForm__errors"
+            title={addressFormErrors}
+            color="danger"
+          >
+            {optionalErrors}
+          </EuiCallOut>
+        )}
+      </EuiI18n>
     );
   }
 
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.js b/src/components/form/form_control_layout/form_control_layout_clear_button.js
index 14dc0519181..94ead09c8f9 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.js
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiIcon } from '../../icon';
+import { EuiI18n } from '../../i18n';
 
 export const EuiFormControlLayoutClearButton = ({
   className,
@@ -12,17 +13,21 @@ export const EuiFormControlLayoutClearButton = ({
   const classes = classNames('euiFormControlLayoutClearButton', className);
 
   return (
-    <button
-      className={classes}
-      onClick={onClick}
-      aria-label="Clear input"
-      {...rest}
-    >
-      <EuiIcon
-        className="euiFormControlLayoutClearButton__icon"
-        type="cross"
-      />
-    </button>
+    <EuiI18n token="euiFormControlLayoutClearButton.label" default="Clear input">
+      {label => (
+        <button
+          className={classes}
+          onClick={onClick}
+          aria-label={label}
+          {...rest}
+        >
+          <EuiIcon
+            className="euiFormControlLayoutClearButton__icon"
+            type="cross"
+          />
+        </button>
+      )}
+    </EuiI18n>
   );
 };
 
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
index 99d8bfd21ae..97ad52e0b57 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -144,7 +144,8 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           class="euiScreenReaderOnly"
           role="alert"
         >
-          You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
+          You are in a form selector of 2 items and must select a single option.
+              Use the up and down keys to navigate or escape to close.
         </p>
         <div
           role="listbox"
@@ -350,7 +351,8 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           class="euiScreenReaderOnly"
           role="alert"
         >
-          You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
+          You are in a form selector of 2 items and must select a single option.
+              Use the up and down keys to navigate or escape to close.
         </p>
         <div
           aria-activedescendant="1"
@@ -542,9 +544,17 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                       className="euiScreenReaderOnly"
                       id="generated-id"
                     >
-                      Select an option: 
-                      Option #1
-                      , is selected
+                      <EuiI18n
+                        default="Select an option: {selectedValue}, is selected"
+                        token="euiSuperSelectControl.selectAnOption"
+                        values={
+                          Object {
+                            "selectedValue": "Option #1",
+                          }
+                        }
+                      >
+                        Select an option: Option #1, is selected
+                      </EuiI18n>
                     </span>
                   </EuiScreenReaderOnly>
                   <button
@@ -689,9 +699,19 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                           className="euiScreenReaderOnly"
                           role="alert"
                         >
-                          You are in a form selector of 
-                          2
-                           items and must select a single option. Use the up and down keys to navigate or escape to close.
+                          <EuiI18n
+                            default="You are in a form selector of {optionsCount} items and must select a single option.
+              Use the up and down keys to navigate or escape to close."
+                            token="euiSuperSelect.screenReaderAnnouncement"
+                            values={
+                              Object {
+                                "optionsCount": 2,
+                              }
+                            }
+                          >
+                            You are in a form selector of 2 items and must select a single option.
+              Use the up and down keys to navigate or escape to close.
+                          </EuiI18n>
                         </p>
                       </EuiScreenReaderOnly>
                       <div
@@ -930,7 +950,8 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           class="euiScreenReaderOnly"
           role="alert"
         >
-          You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
+          You are in a form selector of 2 items and must select a single option.
+              Use the up and down keys to navigate or escape to close.
         </p>
         <div
           role="listbox"
diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
index 41ef0b05d73..5551f41d526 100644
--- a/src/components/form/super_select/super_select.js
+++ b/src/components/form/super_select/super_select.js
@@ -9,6 +9,7 @@ import { EuiSuperSelectControl } from './super_select_control';
 import { EuiPopover } from '../../popover';
 import { EuiContextMenuItem } from '../../context_menu';
 import { keyCodes } from '../../../services';
+import { EuiI18n } from '../../i18n';
 
 const SHIFT_BACK = 'back';
 const SHIFT_FORWARD = 'forward';
@@ -245,8 +246,12 @@ export class EuiSuperSelect extends Component {
       >
         <EuiScreenReaderOnly>
           <p role="alert">
-            You are in a form selector of {options.length} items and must select a single option.
-            Use the up and down keys to navigate or escape to close.
+            <EuiI18n
+              token="euiSuperSelect.screenReaderAnnouncement"
+              default={`You are in a form selector of {optionsCount} items and must select a single option.
+              Use the up and down keys to navigate or escape to close.`}
+              values={{ optionsCount: options.length }}
+            />
           </p>
         </EuiScreenReaderOnly>
         <div role="listbox" aria-activedescendant={valueOfSelected}>
diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js
index a9130e4ea78..c98a27a04e3 100644
--- a/src/components/form/super_select/super_select_control.js
+++ b/src/components/form/super_select/super_select_control.js
@@ -7,6 +7,7 @@ import makeId from '../form_row/make_id';
 import {
   EuiFormControlLayout,
 } from '../form_control_layout';
+import { EuiI18n } from '../../i18n';
 
 export const EuiSuperSelectControl = ({
   className,
@@ -37,7 +38,7 @@ export const EuiSuperSelectControl = ({
     selectDefaultValue = defaultValue || '';
   }
 
-  let selectedValue;
+  let selectedValue = '';
   if (value) {
     const selectedOption = options.find(option => option.value === value);
     selectedValue = selectedOption.inputDisplay;
@@ -73,7 +74,11 @@ export const EuiSuperSelectControl = ({
         */}
         <EuiScreenReaderOnly>
           <span id={screenReaderId}>
-            Select an option: {selectedValue}, is selected
+            <EuiI18n
+              token="euiSuperSelectControl.selectAnOption"
+              default="Select an option: {selectedValue}, is selected"
+              values={{ selectedValue }}
+            />
           </span>
         </EuiScreenReaderOnly>
 
diff --git a/src/components/i18n/__snapshots__/i18n.test.tsx.snap b/src/components/i18n/__snapshots__/i18n.test.tsx.snap
new file mode 100644
index 00000000000..2892971d76e
--- /dev/null
+++ b/src/components/i18n/__snapshots__/i18n.test.tsx.snap
@@ -0,0 +1,355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiI18n default rendering render prop with multiple tokens renders render prop result to the dom 1`] = `
+<EuiI18n
+  defaults={
+    Array [
+      "This is the first basic string.",
+      "This is the second basic string.",
+    ]
+  }
+  tokens={
+    Array [
+      "test1",
+      "test2",
+    ]
+  }
+>
+  <div>
+    This is the first basic string.
+     
+    This is the second basic string.
+  </div>
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering render prop with single token calls a function and renders render prop result to the dom 1`] = `
+<EuiI18n
+  default={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Object {
+            "special": "values",
+            "type": "callback",
+          },
+        ],
+      ],
+      "results": Array [
+        Object {
+          "isThrow": false,
+          "value": "This is a callback with values.",
+        },
+      ],
+    }
+  }
+  token="test"
+  values={
+    Object {
+      "special": "values",
+      "type": "callback",
+    }
+  }
+>
+  Here's something neat: This is a callback with values.
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering render prop with single token renders render prop result to the dom 1`] = `
+<EuiI18n
+  default="This is a basic string."
+  token="test"
+>
+  A nifty thing: This is a basic string.
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering render prop with single token renders render prop result with placeholders to the dom 1`] = `
+<EuiI18n
+  default="This is a {type} with {special}."
+  token="test"
+  values={
+    Object {
+      "special": "values",
+      "type": "string",
+    }
+  }
+>
+  Here's something cool: This is a string with values.
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering rendering to dom calls a function and renders the result to the dom 1`] = `
+<EuiI18n
+  default={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Object {
+            "special": "values",
+            "type": "callback",
+          },
+        ],
+      ],
+      "results": Array [
+        Object {
+          "isThrow": false,
+          "value": "This is a callback with values.",
+        },
+      ],
+    }
+  }
+  token="test"
+  values={
+    Object {
+      "special": "values",
+      "type": "callback",
+    }
+  }
+>
+  This is a callback with values.
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering rendering to dom renders a basic string to the dom 1`] = `
+<EuiI18n
+  default="This is a basic string."
+  token="test"
+>
+  This is a basic string.
+</EuiI18n>
+`;
+
+exports[`EuiI18n default rendering rendering to dom renders a string with placeholders to the dom 1`] = `
+<EuiI18n
+  default="This is a {type} with {special}."
+  token="test"
+  values={
+    Object {
+      "special": "values",
+      "type": "string",
+    }
+  }
+>
+  This is a string with values.
+</EuiI18n>
+`;
+
+exports[`EuiI18n reading values from context render prop with multiple tokens renders mapped render prop result to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test1": "This is the first mapped value.",
+        "test2": "This is the second mapped value.",
+      },
+    }
+  }
+>
+  <EuiI18n
+    defaults={
+      Array [
+        "This is the first basic string.",
+        "This is the second basic string.",
+      ]
+    }
+    tokens={
+      Array [
+        "test1",
+        "test2",
+      ]
+    }
+  >
+    <div>
+      This is the first mapped value.
+       
+      This is the second mapped value.
+    </div>
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context render prop with single token calls a mapped function and renders render prop result to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "special": "values",
+                "type": "callback",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": "This is a callback with values.",
+            },
+          ],
+        },
+      },
+    }
+  }
+>
+  <EuiI18n
+    default={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "special": "values",
+              "type": "callback",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "isThrow": false,
+            "value": "This is a callback with values.",
+          },
+        ],
+      }
+    }
+    token="test"
+    values={
+      Object {
+        "special": "values",
+        "type": "callback",
+      }
+    }
+  >
+    Here's something neat: This is a callback with values.
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context render prop with single token renders mapped render prop result to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": "An overridden string.",
+      },
+    }
+  }
+>
+  <EuiI18n
+    default="This is a basic string."
+    token="test"
+  >
+    A nifty thing: An overridden string.
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context render prop with single token renders mapped render prop result with placeholders to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": "An overridden {type} with {special}.",
+      },
+    }
+  }
+>
+  <EuiI18n
+    default="This is a {type} with {special}."
+    token="test"
+    values={
+      Object {
+        "special": "values",
+        "type": "string",
+      }
+    }
+  >
+    Here's something cool: An overridden string with values.
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context rendering to dom calls a mapped function and renders the result to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "special": "values",
+                "type": "callback",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "isThrow": false,
+              "value": "This is a mapped callback with values.",
+            },
+          ],
+        },
+      },
+    }
+  }
+>
+  <EuiI18n
+    default={[Function]}
+    token="test"
+    values={
+      Object {
+        "special": "values",
+        "type": "callback",
+      }
+    }
+  >
+    This is a mapped callback with values.
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context rendering to dom renders a mapped basic string to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": "An overridden string.",
+      },
+    }
+  }
+>
+  <EuiI18n
+    default="This is a basic string."
+    token="test"
+  >
+    An overridden string.
+  </EuiI18n>
+</EuiContext>
+`;
+
+exports[`EuiI18n reading values from context rendering to dom renders a mapped string with placeholders to the dom 1`] = `
+<EuiContext
+  i18n={
+    Object {
+      "mapping": Object {
+        "test": "An overridden {type} with {special}.",
+      },
+    }
+  }
+>
+  <EuiI18n
+    default="This is a {type} with {special}."
+    token="test"
+    values={
+      Object {
+        "special": "values",
+        "type": "string",
+      }
+    }
+  >
+    An overridden string with values.
+  </EuiI18n>
+</EuiContext>
+`;
diff --git a/src/components/i18n/i18n.test.tsx b/src/components/i18n/i18n.test.tsx
new file mode 100644
index 00000000000..c38567866fa
--- /dev/null
+++ b/src/components/i18n/i18n.test.tsx
@@ -0,0 +1,228 @@
+import React, { ReactChild } from 'react';
+import { mount } from 'enzyme';
+import { EuiContext } from '../context';
+import { EuiI18n } from './i18n';
+
+describe('EuiI18n', () => {
+  describe('default rendering', () => {
+    describe('rendering to dom', () => {
+      it('renders a basic string to the dom', () => {
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default="This is a basic string."
+          />
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('renders a string with placeholders to the dom', () => {
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default="This is a {type} with {special}."
+            values={{ type: 'string', special: 'values' }}
+          />
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('calls a function and renders the result to the dom', () => {
+        const values = { type: 'callback', special: 'values' };
+        const renderCallback = jest.fn(({ type, special }) =>
+          `This is a ${type} with ${special}.`
+        );
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default={renderCallback}
+            values={values}
+          />
+        );
+        expect(component).toMatchSnapshot();
+
+        expect(renderCallback).toHaveBeenCalledWith(values);
+      });
+    });
+
+    describe('render prop with single token', () => {
+      it('renders render prop result to the dom', () => {
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default="This is a basic string."
+          >
+            {(result: ReactChild) => `A nifty thing: ${result}`}
+          </EuiI18n>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('renders render prop result with placeholders to the dom', () => {
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default="This is a {type} with {special}."
+            values={{ type: 'string', special: 'values' }}
+          >
+            {(result: ReactChild) => `Here's something cool: ${result}`}
+          </EuiI18n>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('calls a function and renders render prop result to the dom', () => {
+        const values = { type: 'callback', special: 'values' };
+        const renderCallback = jest.fn(({ type, special }) =>
+          `This is a ${type} with ${special}.`
+        );
+        const component = mount(
+          <EuiI18n
+            token="test"
+            default={renderCallback}
+            values={values}
+          >
+            {(result: ReactChild) => `Here's something neat: ${result}`}
+          </EuiI18n>
+        );
+        expect(component).toMatchSnapshot();
+
+        expect(renderCallback).toHaveBeenCalledWith(values);
+      });
+    });
+
+    describe('render prop with multiple tokens', () => {
+      it('renders render prop result to the dom', () => {
+        const component = mount(
+          <EuiI18n
+            tokens={['test1', 'test2']}
+            defaults={['This is the first basic string.', 'This is the second basic string.']}
+          >
+            {([one, two]: ReactChild[]) => <div>{one} {two}</div>}
+          </EuiI18n>
+        );
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('reading values from context', () => {
+    describe('rendering to dom', () => {
+      it('renders a mapped basic string to the dom', () => {
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: 'An overridden string.' }}}>
+            <EuiI18n
+              token="test"
+              default="This is a basic string."
+            />
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('renders a mapped string with placeholders to the dom', () => {
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: 'An overridden {type} with {special}.' }}}>
+            <EuiI18n
+              token="test"
+              default="This is a {type} with {special}."
+              values={{ type: 'string', special: 'values' }}
+            />
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('calls a mapped function and renders the result to the dom', () => {
+        const values = { type: 'callback', special: 'values' };
+        const renderCallback = jest.fn(({ type, special }) =>
+          `This is a mapped ${type} with ${special}.`
+        );
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: renderCallback }}}>
+            <EuiI18n
+              token="test"
+              default={() => ''}
+              values={values}
+            />
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+
+        expect(renderCallback).toHaveBeenCalledWith(values);
+      });
+    });
+
+    describe('render prop with single token', () => {
+      it('renders mapped render prop result to the dom', () => {
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: 'An overridden string.' }}}>
+            <EuiI18n
+              token="test"
+              default="This is a basic string."
+            >
+              {(result: ReactChild) => `A nifty thing: ${result}`}
+            </EuiI18n>
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('renders mapped render prop result with placeholders to the dom', () => {
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: 'An overridden {type} with {special}.' }}}>
+            <EuiI18n
+              token="test"
+              default="This is a {type} with {special}."
+              values={{ type: 'string', special: 'values' }}
+            >
+              {(result: ReactChild) => `Here's something cool: ${result}`}
+            </EuiI18n>
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+      });
+
+      it('calls a mapped function and renders render prop result to the dom', () => {
+        const values = { type: 'callback', special: 'values' };
+        const renderCallback = jest.fn(({ type, special }) =>
+          `This is a ${type} with ${special}.`
+        );
+        const component = mount(
+          <EuiContext i18n={{ mapping: { test: renderCallback }}}>
+            <EuiI18n
+              token="test"
+              default={renderCallback}
+              values={values}
+            >
+              {(result: ReactChild) => `Here's something neat: ${result}`}
+            </EuiI18n>
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+
+        expect(renderCallback).toHaveBeenCalledWith(values);
+      });
+    });
+
+    describe('render prop with multiple tokens', () => {
+      it('renders mapped render prop result to the dom', () => {
+        const component = mount(
+          <EuiContext i18n={{
+            mapping: {
+              test1: 'This is the first mapped value.',
+              test2: 'This is the second mapped value.',
+            }}}>
+            <EuiI18n
+              tokens={['test1', 'test2']}
+              defaults={['This is the first basic string.', 'This is the second basic string.']}
+            >
+              {([one, two]: ReactChild[]) => <div>{one} {two}</div>}
+            </EuiI18n>
+          </EuiContext>
+        );
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
index 4530104d598..885c4e176df 100644
--- a/src/components/i18n/i18n.tsx
+++ b/src/components/i18n/i18n.tsx
@@ -1,35 +1,64 @@
-import React, { ReactChild, ReactElement } from 'react';
+import React, { Fragment, ReactChild, SFC } from 'react';
 import { EuiI18nConsumer } from '../context';
 import { ExclusiveUnion } from '../common';
-import { I18nShape } from '../context/context';
+import { I18nShape, Renderable, RenderableValues } from '../context/context';
+import { processStringToChildren } from './i18n_util';
 
-// <I18n token="foo"/>
-// <I18n token="foo">{(foo) => <p>foo</p>}</I18n>
-// <I18n tokens=['foo', 'bar']>{([foo, bar]) => <p>{foo}, {bar}</p></I18n>
+function throwError(): never {
+  throw new Error('asdf');
+}
+
+function lookupToken<T extends RenderableValues>(
+  token: string,
+  i18nMapping: I18nShape['mapping'],
+  valueDefault: Renderable<T>,
+  values?: I18nTokenShape<T>['values']
+): ReactChild {
+  const renderable = (i18nMapping && i18nMapping[token]) || valueDefault;
+  if (typeof renderable === 'function') {
+    if (values === undefined) {
+      return throwError();
+    } else {
+      return renderable(values);
+    }
+  } else if (values === undefined || typeof renderable !== 'string') {
+    return renderable;
+  }
+
+  const children = processStringToChildren(renderable, values);
+  if (typeof children === 'string') {
+    return children;
+  }
 
-function lookupToken(token: string, i18nMapping: I18nShape['mapping'], valueDefault: ReactChild) {
-  return (i18nMapping && i18nMapping[token]) || valueDefault;
+  const Component: SFC<any> = () => {
+    return <Fragment>{children}</Fragment>;
+  };
+  return React.createElement(Component, values);
 }
 
-interface I18nTokenShape {
+interface I18nTokenShape<T> {
   token: string;
-  default: ReactChild;
-  children?: (x: ReactChild) => ReactElement<any>;
+  default: Renderable<T>;
+  children?: (x: ReactChild) => ReactChild;
+  values?: T;
 }
 
 interface I18nTokensShape {
   tokens: string[];
   defaults: ReactChild[];
-  children: (x: ReactChild[]) => ReactElement<any>;
+  children: (x: ReactChild[]) => ReactChild;
 }
 
-type EuiI18nProps = ExclusiveUnion<I18nTokenShape, I18nTokensShape>;
+type EuiI18nProps<T> = ExclusiveUnion<I18nTokenShape<T>, I18nTokensShape>;
 
-function hasTokens(x: EuiI18nProps): x is I18nTokensShape {
+function hasTokens(x: EuiI18nProps<any>): x is I18nTokensShape {
   return x.tokens != null;
 }
 
-const EuiI18n: React.SFC<EuiI18nProps> = (props) => (
+// Must use the generics <T extends {}>
+// If instead typed with React.SFC there isn't feedback given back to the dev
+// when using a `values` object with a renderer callback.
+const EuiI18n = <T extends {}>(props: EuiI18nProps<T>) => (
   <EuiI18nConsumer>
     {
       (i18nConfig) => {
@@ -38,7 +67,7 @@ const EuiI18n: React.SFC<EuiI18nProps> = (props) => (
           return props.children(props.tokens.map((token, idx) => lookupToken(token, mapping, props.defaults[idx])));
         }
 
-        const tokenValue = lookupToken(props.token, mapping, props.default);
+        const tokenValue = lookupToken(props.token, mapping, props.default, props.values);
         if (props.children) {
           return props.children(tokenValue);
         } else {
diff --git a/src/components/i18n/i18n_util.test.tsx b/src/components/i18n/i18n_util.test.tsx
new file mode 100644
index 00000000000..513a0c9de2d
--- /dev/null
+++ b/src/components/i18n/i18n_util.test.tsx
@@ -0,0 +1,31 @@
+import { processStringToChildren } from './i18n_util';
+
+describe('i18n_util', () => {
+  describe('processStringToChildren', () => {
+    it('returns a basic string as is', () => {
+      const message = 'This is a test message.';
+      expect(processStringToChildren(message, {})).toEqual(message);
+    });
+
+    it('replaces placeholders with values', () => {
+      expect(processStringToChildren(
+        '{greeting}, {name}',
+        { greeting: 'Hello', name: 'John' }
+      )).toEqual('Hello, John');
+    });
+
+    describe('escape characters', () => {
+      it('backslash escapes opening and closing braces', () => {
+        expect(processStringToChildren(
+          '{greeting}, \\{{name}\\}',
+          { greeting: 'Hello', name: 'John' }
+        )).toEqual('Hello, {John}');
+      });
+
+      it('backslash does not escape any other characters', () => {
+        const message = 'Thi\\s is\\ a test \\message\\.';
+        expect(processStringToChildren(message, {})).toEqual(message);
+      });
+    });
+  });
+});
diff --git a/src/components/i18n/i18n_util.tsx b/src/components/i18n/i18n_util.tsx
new file mode 100644
index 00000000000..3bae35eeab4
--- /dev/null
+++ b/src/components/i18n/i18n_util.tsx
@@ -0,0 +1,98 @@
+import { cloneElement, ReactChild } from 'react';
+import { isBoolean, isString, isNumber } from '../../services/predicate/lodash_predicates';
+import {isElement} from 'react-is';
+import { RenderableValues } from '../context/context';
+
+function isPrimitive(value: ReactChild) {
+  return isBoolean(value) || isString(value) || isNumber(value);
+}
+
+type Child = string | {propName: string} | ReactChild | undefined;
+
+function hasPropName(child: Child): child is ({propName: string}) {
+  return typeof child === 'object' && child.hasOwnProperty('propName');
+}
+
+/**
+ * Replaces placeholder values in `input` with their matching value in `values`
+ * e.g. input:'Hello, {name}' will replace `{name}` with `values[name]`
+ * @param {string} input
+ * @param {RenderableValues} values
+ * @returns {string | React.ReactChild[]}
+ */
+export function processStringToChildren(input: string, values: RenderableValues): string | ReactChild[] {
+  const children: ReactChild[] = [];
+
+  let child: Child;
+
+  function appendCharToChild(char: string) {
+    if (child === undefined) {
+      // starting a new string literal
+      child = char;
+    } else if (typeof child === 'string') {
+      // existing string literal
+      child = child + char;
+    } else if (hasPropName(child)) {
+      // adding to the propName of a values lookup
+      child.propName = child.propName + char;
+    }
+  }
+
+  function appendValueToChildren(value: Child) {
+    if (value === undefined) {
+      return;
+    } else if (isElement(value)) {
+      // an array with any ReactElements will be kept as an array
+      // so they need to be assigned a key
+      children.push(cloneElement(
+        value,
+        { key: children.length }
+      ));
+    } else if (hasPropName(value)) {
+      // this won't be called, propName children are converted to a ReactChild before calling this
+    } else {
+      // everything else can go straight in
+      children.push(value);
+    }
+  }
+
+  // if we don't encounter a non-primitive
+  // then `children` can be concatenated together at the end
+  let encounteredNonPrimitive = false;
+  // tslint:disable-next-line:prefer-for-of
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (char === '\\') {
+      // peek at the next character to know if this is an escape
+      const nextChar = input[i + 1];
+      let charToAdd = char; // if this isn't an escape sequence then we will add the backslash
+
+      if (nextChar === '{' || nextChar === '}') {
+        // escaping a brace
+        i += 1; // advance passed the brace
+        charToAdd = input[i];
+      }
+      appendCharToChild(charToAdd);
+    } else if (char === '{') {
+      appendValueToChildren(child);
+      child = {propName: ''};
+    } else if (char === '}') {
+      const propName = (child as {propName: string}).propName;
+      if (!values.hasOwnProperty(propName)) {
+        throw new Error(`Key "${propName}" not found in ${JSON.stringify(values, null, 2)}`);
+      }
+      const propValue = values[propName];
+      encounteredNonPrimitive = encounteredNonPrimitive || !(isPrimitive(propValue));
+      appendValueToChildren(propValue);
+      child = undefined;
+    } else {
+      appendCharToChild(char);
+    }
+  }
+
+  // include any remaining child value
+  appendValueToChildren(child);
+
+  return encounteredNonPrimitive ? children : children.join('');
+}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 8988d4c0132..a9ec4e21f09 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -19,6 +19,7 @@ import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../mutation_observer';
 
 import { findPopoverPosition, getElementZIndex } from '../../services/popover/popover_positioning';
+import { EuiI18n } from '../i18n';
 
 const anchorPositionToPopoverPositionMap = {
   'up': 'top',
@@ -430,7 +431,9 @@ export class EuiPopover extends Component {
       if (ownFocus) {
         focusTrapScreenReaderText = (
           <EuiScreenReaderOnly>
-            <p role="alert">You are in a popup. To exit this popup, hit escape.</p>
+            <p role="alert">
+              <EuiI18n token="euiPopover.screenReaderAnnouncement" default="You are in a popup. To exit this popup, hit escape."/>
+            </p>
           </EuiScreenReaderOnly>
         );
       }
diff --git a/yarn.lock b/yarn.lock
index a18daba0bdf..93d55fcceec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -894,6 +894,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.3.tgz#bef071852dca2a2dbb65fecdb7bfb30cedae2de2"
   integrity sha512-sfjHrNF4zWRv3fJUGyZW46wVxhYJ/GeWIPdKxbnLIhY3bWR0Ncl2kIhZI7rpjY9KtUQAkDP8jWEmaGQGFFvruA==
 
+"@types/react-is@~16.3.0":
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.3.1.tgz#f3e1dee9d0eb58c049825540cb061b5588022a9e"
+  integrity sha512-evXsFH7q8C1nGUq7XDm+IHqErVsNatfpB+fkmnhQHt1HxZV7VvFkuEmSV/xNHZrf2au91KsinMmUmFBbtAL1bQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized@^9.18.6":
   version "9.18.6"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.6.tgz#d5c559bd003a6c58ba9e20d6cda0dde0342f59af"
@@ -11211,6 +11218,11 @@ react-is@^16.3.2, react-is@^16.6.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
   integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
 
+react-is@~16.3.0:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
+  integrity sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==
+
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"