diff --git a/gallery/src/demos/demo-ha-alert.ts b/gallery/src/demos/demo-ha-alert.ts
index bb833bed54..57b80e47ec 100644
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -9,7 +9,6 @@ const alerts: {
   description: string | TemplateResult;
   type: "info" | "warning" | "error" | "success";
   dismissable?: boolean;
-  action?: string;
   rtl?: boolean;
   iconSlot?: TemplateResult;
   actionSlot?: TemplateResult;
@@ -76,13 +75,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    action: "save",
+    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
   },
   {
     title: "Slotted icon",
@@ -106,7 +105,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
     rtl: true,
   },
   {
@@ -129,7 +128,6 @@ export class DemoHaAlert extends LitElement {
                 .title=${alert.title || ""}
                 .alertType=${alert.type}
                 .dismissable=${alert.dismissable || false}
-                .actionText=${alert.action || ""}
                 .rtl=${alert.rtl || false}
               >
                 ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index 7f53dd717a..671cbe9077 100644
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -176,11 +176,6 @@ class HaGallery extends PolymerElement {
     this.addEventListener("alert-dismissed-clicked", () =>
       this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
     );
-
-    this.addEventListener("alert-action-clicked", () =>
-      this.$.notifications.showDialog({ message: "Alert action clicked" })
-    );
-
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index be50bc59c5..756a471359 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -151,14 +151,18 @@ class HassioAddonInfo extends LitElement {
               .title=${this.supervisor.localize(
                 "addon.dashboard.protection_mode.title"
               )}
-              .actionText=${this.supervisor.localize(
-                "addon.dashboard.protection_mode.enable"
-              )}
-              @alert-action-clicked=${this._protectionToggled}
             >
               ${this.supervisor.localize(
                 "addon.dashboard.protection_mode.content"
               )}
+              <mwc-button
+                slot="action"
+                .label=${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
+                @click=${this._protectionToggled}
+              >
+              </mwc-button>
             </ha-alert>
           `
         : ""}
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index 887ddd105d..4c3a50efa4 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -151,24 +151,28 @@ class HassioSupervisorInfo extends LitElement {
                     ></ha-switch>
                   </ha-settings-row>`
                 : ""
-              : html`<ha-alert
-                  alert-type="warning"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unsupportedDialog}
-                >
+              : html`<ha-alert alert-type="warning">
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
                   )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unsupportedDialog}
+                  >
+                  </mwc-button>
                 </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
-              ? html`<ha-alert
-                  alert-type="error"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unhealthyDialog}
-                >
+              ? html`<ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "system.supervisor.unhealthy_title"
                   )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unhealthyDialog}
+                  >
+                  </mwc-button>
                 </ha-alert>`
               : ""}
           </div>
@@ -466,6 +470,9 @@ class HassioSupervisorInfo extends LitElement {
           white-space: normal;
           color: var(--secondary-text-color);
         }
+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
         a {
           text-decoration: none;
         }
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index 236ae8c7c5..93df6b7e24 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiAlertCircleOutline,
   mdiAlertOutline,
@@ -23,7 +22,6 @@ const ALERT_ICONS = {
 declare global {
   interface HASSDomEvents {
     "alert-dismissed-clicked": undefined;
-    "alert-action-clicked": undefined;
   }
 }
 
@@ -37,8 +35,6 @@ class HaAlert extends LitElement {
     | "error"
     | "success" = "info";
 
-  @property({ attribute: "action-text" }) public actionText = "";
-
   @property({ type: Boolean }) public dismissable = false;
 
   @property({ type: Boolean }) public rtl = false;
@@ -63,12 +59,7 @@ class HaAlert extends LitElement {
           </div>
           <div class="action">
             <slot name="action">
-              ${this.actionText
-                ? html`<mwc-button
-                    @click=${this._action_clicked}
-                    .label=${this.actionText}
-                  ></mwc-button>`
-                : this.dismissable
+              ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismiss_clicked}
                     label="Dismiss alert"
@@ -86,10 +77,6 @@ class HaAlert extends LitElement {
     fireEvent(this, "alert-dismissed-clicked");
   }
 
-  private _action_clicked() {
-    fireEvent(this, "alert-action-clicked");
-  }
-
   static styles = css`
     .issue-type {
       position: relative;
@@ -133,6 +120,10 @@ class HaAlert extends LitElement {
       align-items: center;
       width: 100%;
     }
+    .action {
+      width: min-content;
+      --mdc-theme-primary: var(--primary-text-color);
+    }
     .main-content {
       overflow-wrap: anywhere;
     }
@@ -140,9 +131,6 @@ class HaAlert extends LitElement {
       margin-top: 2px;
       font-weight: bold;
     }
-    mwc-button {
-      --mdc-theme-primary: var(--primary-text-color);
-    }
     ha-icon-button {
       --mdc-icon-button-size: 36px;
     }