diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts
index 0851a1269b..c167dc0e84 100644
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/hassio/src/addon-view/config/hassio-addon-audio.ts
@@ -55,7 +55,9 @@ class HassioAddonAudio extends LitElement {
       >
         <div class="card-content">
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            ? html`<ha-alert .hass=${this.hass} alert-type="error"
+                >${this._error}</ha-alert
+              >`
             : ""}
 
           <paper-dropdown-menu
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 4d2ef2acd8..8dda736a68 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -137,14 +137,16 @@ class HassioAddonConfig extends LitElement {
                 .yamlSchema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            ? html`<ha-alert .hass=${this.hass} alert-type="error">
+                ${this._error}
+              </ha-alert>`
             : ""}
           ${!this._yamlMode ||
           (this._canShowSchema && this.addon.schema) ||
           this._valid
             ? ""
             : html`
-                <ha-alert alert-type="error">
+                <ha-alert .hass=${this.hass} alert-type="error">
                   ${this.supervisor.localize(
                     "addon.configuration.options.invalid_yaml"
                   )}
diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts
index ae3deed1db..ab6ce3e860 100644
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/hassio/src/addon-view/config/hassio-addon-network.ts
@@ -64,7 +64,9 @@ class HassioAddonNetwork extends LitElement {
       >
         <div class="card-content">
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            ? html`<ha-alert .hass=${this.hass} alert-type="error">
+                ${this._error}
+              </ha-alert>`
             : ""}
 
           <table>
diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
index 411027275a..e248f37288 100644
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
@@ -40,7 +40,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
       <div class="content">
         <ha-card>
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            ? html`<ha-alert .hass=${this.hass} alert-type="error">
+                ${this._error}
+              </ha-alert>`
             : ""}
           <div class="card-content">
             ${this._content
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index d1f6da3d08..2ca1016876 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -144,14 +144,14 @@ class HassioAddonInfo extends LitElement {
                       this.addon.arch
                     )
                     ? html`
-                        <ha-alert alert-type="warning">
+                        <ha-alert .hass=${this.hass} alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch"
                           )}
                         </ha-alert>
                       `
                     : html`
-                        <ha-alert alert-type="warning">
+                        <ha-alert .hass=${this.hass} alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch",
                             "core_version_installed",
@@ -572,7 +572,9 @@ class HassioAddonInfo extends LitElement {
             </div>
           </div>
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            ? html`<ha-alert .hass=${this.hass} alert-type="error">
+                ${this._error}
+              </ha-alert>`
             : ""}
           ${!this.addon.version && addonStoreInfo && !this.addon.available
             ? !addonArchIsSupported(
@@ -580,14 +582,14 @@ class HassioAddonInfo extends LitElement {
                 this.addon.arch
               )
               ? html`
-                  <ha-alert alert-type="warning">
+                  <ha-alert .hass=${this.hass} alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_arch"
                     )}
                   </ha-alert>
                 `
               : html`
-                  <ha-alert alert-type="warning">
+                  <ha-alert .hass=${this.hass} alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_version",
                       "core_version_installed",
diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts
index 133e888bb9..49b4388e97 100644
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/hassio/src/addon-view/log/hassio-addon-logs.ts
@@ -36,7 +36,9 @@ class HassioAddonLogs extends LitElement {
       <h1>${this.addon.name}</h1>
       <ha-card>
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
         <div class="card-content">
           ${this._content
diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
index 0287c8fa01..097acd7505 100644
--- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
@@ -92,7 +92,9 @@ class HassioBackupDialog
             >
             </supervisor-backup-content>`}
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
 
         <mwc-button
diff --git a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
index 89325f04de..6ccb72d337 100644
--- a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
@@ -64,7 +64,9 @@ class HassioCreateBackupDialog extends LitElement {
             >
             </supervisor-backup-content>`}
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
         <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
           ${this._dialogParams.supervisor.localize("common.close")}
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index d765060baa..a247fc7f37 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -252,7 +252,7 @@ export class DialogHassioNetwork
             `
           : ""}
         ${this._dirty
-          ? html`<ha-alert alert-type="warning">
+          ? html`<ha-alert .hass=${this.hass} alert-type="warning">
               ${this.supervisor.localize("dialog.network.warning")}
             </ha-alert>`
           : ""}
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 64eb324a20..647ef85227 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -78,7 +78,9 @@ class HassioRepositoriesDialog extends LitElement {
         )}
       >
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
         <div class="form">
           ${repositories.length
diff --git a/hassio/src/dialogs/update/dialog-supervisor-update.ts b/hassio/src/dialogs/update/dialog-supervisor-update.ts
index ca832ff776..23f2d65946 100644
--- a/hassio/src/dialogs/update/dialog-supervisor-update.ts
+++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts
@@ -130,7 +130,9 @@ class DialogSupervisorUpdate extends LitElement {
                     )}
               </p>`}
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
       </ha-dialog>
     `;
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index 7282cced77..5804cf4c2e 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -174,6 +174,7 @@ class HassioSupervisorInfo extends LitElement {
                   </ha-settings-row>`
                 : ""
               : html`<ha-alert
+                  .hass=${this.hass}
                   alert-type="warning"
                   .actionText=${this.supervisor.localize("common.learn_more")}
                   @alert-action-clicked=${this._unsupportedDialog}
@@ -184,6 +185,7 @@ class HassioSupervisorInfo extends LitElement {
                 </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
               ? html`<ha-alert
+                  .hass=${this.hass}
                   alert-type="error"
                   .actionText=${this.supervisor.localize("common.learn_more")}
                   @alert-action-clicked=${this._unhealthyDialog}
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 09f518703c..78497c618c 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -69,7 +69,9 @@ class HassioSupervisorLog extends LitElement {
     return html`
       <ha-card>
         ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          ? html`<ha-alert .hass=${this.hass} alert-type="error">
+              ${this._error}
+            </ha-alert>`
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index ddd3c641e7..c27f9b825e 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -11,6 +11,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeRTL } from "../common/util/compute_rtl";
+import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
 const ALERT_ICONS = {
@@ -29,6 +31,8 @@ declare global {
 
 @customElement("ha-alert")
 class HaAlert extends LitElement {
+  @property({ type: Object }) public hass?: HomeAssistant;
+
   @property() public title = "";
 
   @property({ attribute: "alert-type" }) public alertType:
@@ -37,7 +41,7 @@ class HaAlert extends LitElement {
     | "error"
     | "success" = "info";
 
-  @property({ attribute: "action-text" }) public actionText = "";
+  @property({ attribute: "action-text" }) public actionText?: string;
 
   @property({ type: Boolean }) public dismissable = false;
 
@@ -47,7 +51,7 @@ class HaAlert extends LitElement {
     return html`
       <div
         class="issue-type ${classMap({
-          rtl: this.rtl,
+          rtl: this.hass ? computeRTL(this.hass) : this.rtl,
           [this.alertType]: true,
         })}"
       >
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index 5f9c343ba0..841e703411 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -46,6 +46,7 @@ export class CloudGooglePref extends LitElement {
           ${google_enabled && !this.cloudStatus.google_registered
             ? html`
                 <ha-alert
+                  .hass=${this.hass}
                   .title=${this.hass.localize(
                     "ui.panel.config.cloud.account.google.not_configured_title"
                   )}
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index aeadcf80ed..9e82a52931 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -64,6 +64,7 @@ export class CloudRemotePref extends LitElement {
           ${!remote_connected && remote_enabled
             ? html`
                 <ha-alert
+                  .hass=${this.hass}
                   .title=${this.hass.localize(
                     `ui.panel.config.cloud.account.remote.reconnecting`
                   )}
diff --git a/src/panels/config/energy/components/ha-energy-validation-result.ts b/src/panels/config/energy/components/ha-energy-validation-result.ts
index 88e26b42a3..ac39f47b85 100644
--- a/src/panels/config/energy/components/ha-energy-validation-result.ts
+++ b/src/panels/config/energy/components/ha-energy-validation-result.ts
@@ -23,6 +23,7 @@ class EnergyValidationMessage extends LitElement {
     return Object.entries(grouped).map(
       ([issueType, gIssues]) => html`
           <ha-alert
+            .hass=${this.hass}
             alert-type="warning"
             .title=${
               this.hass.localize(
diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts
index e9c21120c8..359b01eb73 100644
--- a/src/panels/config/energy/ha-config-energy.ts
+++ b/src/panels/config/energy/ha-config-energy.ts
@@ -78,7 +78,7 @@ class HaConfigEnergy extends LitElement {
         .route=${this.route}
         .tabs=${configSections.experiences}
       >
-        <ha-alert>
+        <ha-alert .hass=${this.hass}>
           After setting up a new device, it can take up to 2 hours for new data
           to arrive in your energy dashboard.
         </ha-alert>
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
index 99cf52fb36..cb89179d5e 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
@@ -159,7 +159,10 @@ export class ZwaveMigration extends LitElement {
                         )
                         .map(
                           (entityState) =>
-                            html`<ha-alert alert-type="warning">
+                            html`<ha-alert
+                              .hass=${this.hass}
+                              alert-type="warning"
+                            >
                               Device ${computeStateName(entityState)}
                               (${entityState.entity_id}) is not ready yet! For
                               the best result, wake the device up if it is
@@ -252,7 +255,10 @@ export class ZwaveMigration extends LitElement {
                       </p>
                       ${this._waitingOnDevices?.map(
                         (device) =>
-                          html`<ha-alert alert-type="warning">
+                          html`<ha-alert
+                            .hass=${this.hass}
+                            alert-type="warning"
+                          >
                             Device ${computeDeviceName(device, this.hass)} is
                             not ready yet! For the best result, wake the device
                             up if it is battery powered and wait for this device
@@ -265,6 +271,7 @@ export class ZwaveMigration extends LitElement {
                             ${this._migratedZwaveEntities!.length !==
                             this._migrationData.zwave_entity_ids.length
                               ? html`<ha-alert
+                                    .hass=${this.hass}
                                     alert-type="warning"
                                     title="Not all entities can be migrated!"
                                   >
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index 088ebf5f86..aa65d24136 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -166,7 +166,7 @@ class DialogZWaveJSAddNode extends LitElement {
                 </p>
                 ${
                   this._error
-                    ? html`<ha-alert alert-type="error"
+                    ? html`<ha-alert .hass=${this.hass} alert-type="error"
                         >${this._error}</ha-alert
                       >`
                     : ""
@@ -192,7 +192,9 @@ class DialogZWaveJSAddNode extends LitElement {
           ? html`
               <h3>The device has requested the following security classes:</h3>
               ${this._error
-                ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+                ? html`<ha-alert .hass=${this.hass} alert-type="error"
+                    >${this._error}</ha-alert
+                  >`
                 : ""}
               <div class="flex-column">
                 ${this._requestedGrant?.securityClasses
@@ -356,6 +358,7 @@ class DialogZWaveJSAddNode extends LitElement {
                   </p>
                   ${this._lowSecurity
                     ? html`<ha-alert
+                        .hass=${this.hass}
                         alert-type="warning"
                         title="The device was added insecurely"
                       >
diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index b5941c91ab..d990afcb29 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -35,7 +35,11 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
       }
     }
 
-    return html`<ha-alert alert-type="error" .title=${this._config.error}>
+    return html`<ha-alert
+      .hass=${this.hass}
+      alert-type="error"
+      .title=${this._config.error}
+    >
       ${dumped ? html`<pre>${dumped}</pre>` : ""}
     </ha-alert>`;
   }
diff --git a/src/panels/lovelace/components/hui-warning.ts b/src/panels/lovelace/components/hui-warning.ts
index 20f59819c2..974f015f2c 100644
--- a/src/panels/lovelace/components/hui-warning.ts
+++ b/src/panels/lovelace/components/hui-warning.ts
@@ -19,7 +19,9 @@ export const createEntityNotFoundWarning = (
 @customElement("hui-warning")
 export class HuiWarning extends LitElement {
   protected render(): TemplateResult {
-    return html`<ha-alert alert-type="warning"><slot></slot></ha-alert> `;
+    return html`<ha-alert alert-type="warning">
+      <slot></slot>
+    </ha-alert> `;
   }
 }
 
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 9f76adeadc..99f2b6ee26 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -124,7 +124,7 @@ export class HuiDialogEditView extends LitElement {
             ? html`
                 ${VIEWS_NO_BADGE_SUPPORT.includes(this._type)
                   ? html`
-                      <ha-alert alert-type="warning">
+                      <ha-alert .hass=${this.hass} alert-type="warning">
                         ${this.hass!.localize(
                           "ui.panel.lovelace.editor.edit_badges.view_no_badges"
                         )}