diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx
index 4418311537b..320c5af3e26 100644
--- a/src/components/input-time-picker/input-time-picker.tsx
+++ b/src/components/input-time-picker/input-time-picker.tsx
@@ -33,6 +33,7 @@ import {
   numberStringFormatter,
   updateEffectiveLocale
 } from "../../utils/locale";
+import { Messages } from "../time-picker/assets/time-picker/t9n";
 import { numberKeys } from "../../utils/key";
 
 @Component({
@@ -107,42 +108,97 @@ export class InputTimePicker
     }
   }
 
-  /** Accessible name for the component's hour input. */
+  /**
+   * Accessible name for the component's hour input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHour?: string;
 
-  /** Accessible name for the component's hour down button. */
+  /**
+   * Accessible name for the component's hour down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHourDown?: string;
 
-  /** Accessible name for the component's hour up button. */
+  /**
+   * Accessible name for the component's hour up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHourUp?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) input. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiem?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) down button. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiemDown?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) up button. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiemUp?: string;
 
-  /** Accessible name for the component's minute input. */
+  /**
+   * Accessible name for the component's minute input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinute?: string;
 
-  /** Accessible name for the component's minute down button. */
+  /**
+   * Accessible name for the component's minute down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinuteDown?: string;
 
-  /** Accessible name for the component's minute up button. */
+  /**
+   * Accessible name for the component's minute up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinuteUp?: string;
 
-  /** Accessible name for the component's second input. */
+  /**
+   * Accessible name for the component's second input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecond?: string;
 
-  /** Accessible name for the component's second down button. */
+  /**
+   * Accessible name for the component's second down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecondDown?: string;
 
-  /** Accessible name for the component's second up button. */
+  /**
+   * Accessible name for the component's second up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecondUp?: string;
 
+  /**
+   * Use this property to override individual strings used by the component.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
+  @Prop() messagesOverrides: Partial<Messages>;
+
   /**
    * BCP 47 language tag for desired language and country format.
    *
@@ -562,6 +618,7 @@ export class InputTimePicker
           triggerDisabled={true}
         >
           <calcite-time-picker
+            //t9n props are used here to forward the messages only.
             intlHour={this.intlHour}
             intlHourDown={this.intlHourDown}
             intlHourUp={this.intlHourUp}
@@ -575,6 +632,7 @@ export class InputTimePicker
             intlSecondDown={this.intlSecondDown}
             intlSecondUp={this.intlSecondUp}
             lang={this.effectiveLocale}
+            messageOverrides={this.messagesOverrides}
             numberingSystem={this.numberingSystem}
             onCalciteInternalTimePickerChange={this.timePickerChangeHandler}
             ref={this.setCalciteTimePickerEl}
diff --git a/src/components/time-picker/resources.ts b/src/components/time-picker/resources.ts
index 00e2bf2e503..bad674cc34c 100644
--- a/src/components/time-picker/resources.ts
+++ b/src/components/time-picker/resources.ts
@@ -27,18 +27,3 @@ export const CSS = {
   timePicker: "time-picker",
   meridiemStart: "meridiem--start"
 };
-
-export const TEXT = {
-  hour: "Hour",
-  hourDown: "Decrease hour",
-  hourUp: "Increase hour",
-  meridiem: "AM/PM",
-  meridiemDown: "Decrease AM/PM",
-  meridiemUp: "Increase AM/PM",
-  minute: "Minute",
-  minuteDown: "Decrease minute",
-  minuteUp: "Increase minute",
-  second: "Second",
-  secondDown: "Decrease second",
-  secondUp: "Increase second"
-};
diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts
index 233c1d1f501..e25f923e0f7 100644
--- a/src/components/time-picker/time-picker.e2e.ts
+++ b/src/components/time-picker/time-picker.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, renders, hidden } from "../../tests/commonTests";
+import { accessible, defaults, focusable, renders, hidden, t9n } from "../../tests/commonTests";
 import { formatTimePart } from "../../utils/time";
 import { CSS } from "./resources";
 
@@ -1053,4 +1053,6 @@ describe("calcite-time-picker", () => {
       expect(meridiemStart).toBeTruthy();
     });
   });
+
+  it("suuports translation", () => t9n("<calcite-time-picker></calcite-time-picker>"));
 });
diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx
index e53dab0f8c1..90864576d1f 100644
--- a/src/components/time-picker/time-picker.tsx
+++ b/src/components/time-picker/time-picker.tsx
@@ -30,7 +30,7 @@ import {
   parseTimeString,
   TimePart
 } from "../../utils/time";
-import { CSS, TEXT } from "./resources";
+import { CSS } from "./resources";
 import {
   connectLocalized,
   disconnectLocalized,
@@ -38,6 +38,14 @@ import {
   NumberingSystem,
   updateEffectiveLocale
 } from "../../utils/locale";
+import { Messages } from "./assets/time-picker/t9n";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages
+} from "../../utils/t9n";
 
 function capitalize(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -46,9 +54,10 @@ function capitalize(str: string): string {
 @Component({
   tag: "calcite-time-picker",
   styleUrl: "time-picker.scss",
-  shadow: true
+  shadow: true,
+  assetsDirs: ["assets"]
 })
-export class TimePicker implements LocalizedComponent {
+export class TimePicker implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -67,85 +76,96 @@ export class TimePicker implements LocalizedComponent {
    * Accessible name for the component's hour input.
    *
    * @default "Hour"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlHour = TEXT.hour;
+  @Prop() intlHour: string;
 
   /**
    * Accessible name for the component's hour down button.
    *
    * @default "Decrease hour"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlHourDown = TEXT.hourDown;
+  @Prop() intlHourDown: string;
 
   /**
    * Accessible name for the component's hour up button.
    *
    * @default "Increase hour"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlHourUp = TEXT.hourUp;
+  @Prop() intlHourUp: string;
 
   /**
    * Accessible name for the component's meridiem (AM/PM) input.
    *
    * @default "AM/PM"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMeridiem = TEXT.meridiem;
+  @Prop() intlMeridiem: string;
 
   /**
    * Accessible name for the component's meridiem (AM/PM) down button.
    *
    * @default "Decrease AM/PM"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMeridiemDown = TEXT.meridiemDown;
+  @Prop() intlMeridiemDown: string;
 
   /**
    * Accessible name for the component's meridiem (AM/PM) up button.
    *
    * @default "Increase AM/PM"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMeridiemUp = TEXT.meridiemUp;
+  @Prop() intlMeridiemUp: string;
 
   /**
    * Accessible name for the component's minute input.
    *
    * @default "Minute"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMinute = TEXT.minute;
+  @Prop() intlMinute: string;
 
   /**
    * Accessible name for the component's minute down button.
    *
    * @default "Decrease minute"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMinuteDown = TEXT.minuteDown;
+  @Prop() intlMinuteDown: string;
 
   /**
    * Accessible name for the component's minute up button.
    *
    * @default "Increase minute"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlMinuteUp = TEXT.minuteUp;
+  @Prop() intlMinuteUp: string;
 
   /**
    * Accessible name for the component's second input.
    *
    * @default "Second"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlSecond = TEXT.second;
+  @Prop() intlSecond: string;
 
   /**
    * Accessible name for the component's second down button.
    *
    * @default "Decrease second"
    */
-  @Prop() intlSecondDown = TEXT.secondDown;
+  @Prop() intlSecondDown: string;
 
   /**
    * Accessible name for the component's second up button.
    *
    * @default "Increase second"
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlSecondUp = TEXT.secondUp;
+  @Prop() intlSecondUp: string;
 
   /**
    * BCP 47 language tag for desired language and country format.
@@ -181,6 +201,36 @@ export class TimePicker implements LocalizedComponent {
     this.setValue(newValue, false);
   }
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  @Prop({ mutable: true }) messages: Messages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
+
+  @Watch("intlHour")
+  @Watch("intlHourDown")
+  @Watch("intlHourUp")
+  @Watch("intlMeridiem")
+  @Watch("intlMeridiemDown")
+  @Watch("intlMeridiemUp")
+  @Watch("intlMinute")
+  @Watch("intlMinuteDown")
+  @Watch("intlMinuteUp")
+  @Watch("intlSecond")
+  @Watch("intlSecondDown")
+  @Watch("intlSecondUp")
+  @Watch("messageOverrides")
+  @Watch("defaultMessages")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -238,6 +288,8 @@ export class TimePicker implements LocalizedComponent {
 
   @State() showSecond: boolean = this.step < 60;
 
+  @State() defaultMessages: Messages;
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -748,6 +800,7 @@ export class TimePicker implements LocalizedComponent {
   }
 
   private updateLocale() {
+    updateMessages(this, this.effectiveLocale);
     this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
@@ -761,6 +814,7 @@ export class TimePicker implements LocalizedComponent {
   connectedCallback() {
     connectLocalized(this);
     this.updateLocale();
+    connectMessages(this);
     this.meridiemOrder = this.getMeridiemOrder(
       getTimeParts({
         value: "0:00:00",
@@ -772,6 +826,11 @@ export class TimePicker implements LocalizedComponent {
 
   disconnectedCallback(): void {
     disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+
+  async componentWillLoad(): Promise<void> {
+    await setUpMessages(this);
   }
 
   // --------------------------------------------------------------------------
@@ -798,7 +857,7 @@ export class TimePicker implements LocalizedComponent {
       >
         <div class={CSS.column} role="group">
           <span
-            aria-label={this.intlHourUp}
+            aria-label={this.messages.hourUp}
             class={{
               [CSS.button]: true,
               [CSS.buttonHourUp]: true,
@@ -812,7 +871,7 @@ export class TimePicker implements LocalizedComponent {
             <calcite-icon icon="chevron-up" scale={iconScale} />
           </span>
           <span
-            aria-label={this.intlHour}
+            aria-label={this.messages.hour}
             aria-valuemax="23"
             aria-valuemin="1"
             aria-valuenow={(hourIsNumber && parseInt(this.hour)) || "0"}
@@ -830,7 +889,7 @@ export class TimePicker implements LocalizedComponent {
             {this.localizedHour || "--"}
           </span>
           <span
-            aria-label={this.intlHourDown}
+            aria-label={this.messages.hourDown}
             class={{
               [CSS.button]: true,
               [CSS.buttonHourDown]: true,
@@ -847,7 +906,7 @@ export class TimePicker implements LocalizedComponent {
         <span class={CSS.delimiter}>{this.localizedHourSuffix}</span>
         <div class={CSS.column} role="group">
           <span
-            aria-label={this.intlMinuteUp}
+            aria-label={this.messages.minuteUp}
             class={{
               [CSS.button]: true,
               [CSS.buttonMinuteUp]: true
@@ -860,7 +919,7 @@ export class TimePicker implements LocalizedComponent {
             <calcite-icon icon="chevron-up" scale={iconScale} />
           </span>
           <span
-            aria-label={this.intlMinute}
+            aria-label={this.messages.minute}
             aria-valuemax="12"
             aria-valuemin="1"
             aria-valuenow={(minuteIsNumber && parseInt(this.minute)) || "0"}
@@ -878,7 +937,7 @@ export class TimePicker implements LocalizedComponent {
             {this.localizedMinute || "--"}
           </span>
           <span
-            aria-label={this.intlMinuteDown}
+            aria-label={this.messages.minuteDown}
             class={{
               [CSS.button]: true,
               [CSS.buttonMinuteDown]: true
@@ -895,7 +954,7 @@ export class TimePicker implements LocalizedComponent {
         {this.showSecond && (
           <div class={CSS.column} role="group">
             <span
-              aria-label={this.intlSecondUp}
+              aria-label={this.messages.secondUp}
               class={{
                 [CSS.button]: true,
                 [CSS.buttonSecondUp]: true
@@ -908,7 +967,7 @@ export class TimePicker implements LocalizedComponent {
               <calcite-icon icon="chevron-up" scale={iconScale} />
             </span>
             <span
-              aria-label={this.intlSecond}
+              aria-label={this.messages.second}
               aria-valuemax="59"
               aria-valuemin="0"
               aria-valuenow={(secondIsNumber && parseInt(this.second)) || "0"}
@@ -926,7 +985,7 @@ export class TimePicker implements LocalizedComponent {
               {this.localizedSecond || "--"}
             </span>
             <span
-              aria-label={this.intlSecondDown}
+              aria-label={this.messages.secondDown}
               class={{
                 [CSS.button]: true,
                 [CSS.buttonSecondDown]: true
@@ -952,7 +1011,7 @@ export class TimePicker implements LocalizedComponent {
             role="group"
           >
             <span
-              aria-label={this.intlMeridiemUp}
+              aria-label={this.messages.meridiemUp}
               class={{
                 [CSS.button]: true,
                 [CSS.buttonMeridiemUp]: true,
@@ -966,7 +1025,7 @@ export class TimePicker implements LocalizedComponent {
               <calcite-icon icon="chevron-up" scale={iconScale} />
             </span>
             <span
-              aria-label={this.intlMeridiem}
+              aria-label={this.messages.meridiem}
               aria-valuemax="2"
               aria-valuemin="1"
               aria-valuenow={(this.meridiem === "PM" && "2") || "1"}
@@ -984,7 +1043,7 @@ export class TimePicker implements LocalizedComponent {
               {this.localizedMeridiem || "--"}
             </span>
             <span
-              aria-label={this.intlMeridiemDown}
+              aria-label={this.messages.meridiemDown}
               class={{
                 [CSS.button]: true,
                 [CSS.buttonMeridiemDown]: true,