diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.hbs
new file mode 100644
index 00000000000..21898c98ec5
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.hbs
@@ -0,0 +1,8 @@
+{{#if this.shouldRender}}
+  <DButton
+    @class="btn-primary chat-user-card-btn"
+    @action={{this.startChatting}}
+    @label="chat.title_capitalized"
+    @icon="d-chat"
+  />
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.js b/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.js
new file mode 100644
index 00000000000..c8466370943
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/user-card-button.js
@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+
+export default class ChatUserCardButton extends Component {
+  @service chat;
+  @service appEvents;
+  @service router;
+
+  get shouldRender() {
+    return this.chat.userCanDirectMessage && !this.args.user.suspended;
+  }
+
+  @action
+  startChatting() {
+    return this.chat
+      .upsertDmChannelForUsernames([this.args.user.username])
+      .then((channel) => {
+        this.router.transitionTo("chat.channel", ...channel.routeModels);
+        this.appEvents.trigger("card:close");
+      });
+  }
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.hbs b/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.hbs
deleted file mode 100644
index 2fdcbb4303c..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-{{#if (and this.chat.userCanDirectMessage (not @user.suspended))}}
-  <DButton
-    @class="btn-primary user-card-chat-btn"
-    @action={{action "startChatting"}}
-    @label="chat.title_capitalized"
-    @icon="d-chat"
-  />
-{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js b/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js
deleted file mode 100644
index 6a256452363..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-
-export default class UserCardChatButton extends Component {
-  @service chat;
-  @service appEvents;
-  @service router;
-
-  @action
-  startChatting() {
-    this.chat
-      .upsertDmChannelForUsernames([this.user.username])
-      .then((chatChannel) => {
-        this.router.transitionTo("chat.channel", ...chatChannel.routeModels);
-        this.appEvents.trigger("card:close");
-      });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs b/plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs
index d60987db2ef..03a17675fa7 100644
--- a/plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs
+++ b/plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs
@@ -1,3 +1,3 @@
 {{#if this.user.can_chat_user}}
-  <UserCardChatButton @user={{this.user}} />
+  <Chat::UserCardButton @user={{this.user}} />
 {{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js b/plugins/chat/assets/javascripts/discourse/lib/fabricators.js
index a4dba3ff61b..93919babe61 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/fabricators.js
+++ b/plugins/chat/assets/javascripts/discourse/lib/fabricators.js
@@ -114,6 +114,7 @@ function userFabricator(args = {}) {
     username: args.username || "hawk",
     name: args.name,
     avatar_template: "/letter_avatar_proxy/v3/letter/t/41988e/{size}.png",
+    suspended_till: args.suspended_till,
   });
 }
 
diff --git a/plugins/chat/spec/system/user_card_spec.rb b/plugins/chat/spec/system/user_card_spec.rb
index 2cb953055d6..da5348ba1c2 100644
--- a/plugins/chat/spec/system/user_card_spec.rb
+++ b/plugins/chat/spec/system/user_card_spec.rb
@@ -10,13 +10,13 @@ RSpec.describe "User card", type: :system do
 
   shared_examples "not showing chat button" do
     it "doesn’t show the chat buttton" do
-      expect(page).to have_no_css(".user-card-chat-btn")
+      expect(page).to have_no_css(".chat-user-card-btn")
     end
   end
 
   shared_examples "showing chat button" do
     it "shows the chat buttton" do
-      expect(page).to have_css(".user-card-chat-btn")
+      expect(page).to have_css(".chat-user-card-btn")
     end
   end
 
@@ -49,7 +49,7 @@ RSpec.describe "User card", type: :system do
         include_examples "showing chat button"
 
         context "when clicking chat button" do
-          before { find(".user-card-chat-btn").click }
+          before { find(".chat-user-card-btn").click }
 
           it "opens correct channel" do
             # at this point the ChatChannel is not created yet
diff --git a/plugins/chat/test/javascripts/components/chat-user-card-button-test.js b/plugins/chat/test/javascripts/components/chat-user-card-button-test.js
new file mode 100644
index 00000000000..7a750dc06b8
--- /dev/null
+++ b/plugins/chat/test/javascripts/components/chat-user-card-button-test.js
@@ -0,0 +1,53 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import sinon from "sinon";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+module(
+  "Discourse Chat | Component | <Chat::UserCardButton />",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("when current user can send direct messages", async function (assert) {
+      sinon
+        .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
+        .value(true);
+      this.user = fabricators.user();
+
+      await render(hbs`<Chat::UserCardButton @user={{user}} />`);
+
+      assert.dom(".chat-user-card-btn").exists("it shows the chat button");
+    });
+
+    test("when current user can’t send direct messages", async function (assert) {
+      sinon
+        .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
+        .value(false);
+      this.user = fabricators.user();
+
+      await render(hbs`<Chat::UserCardButton @user={{user}} />`);
+
+      assert
+        .dom(".chat-user-card-btn")
+        .doesNotExist("it doesn’t show the chat button");
+    });
+
+    test("when displayed user is suspended", async function (assert) {
+      sinon
+        .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
+        .value(true);
+
+      this.user = fabricators.user({
+        suspended_till: moment().add(1, "year").toDate(),
+      });
+
+      await render(hbs`<Chat::UserCardButton @user={{user}}/>`);
+
+      assert
+        .dom(".chat-user-card-btn")
+        .doesNotExist("it doesn’t show the chat button");
+    });
+  }
+);
diff --git a/plugins/chat/test/javascripts/components/user-card-chat-button-test.js b/plugins/chat/test/javascripts/components/user-card-chat-button-test.js
deleted file mode 100644
index a3bb89a8784..00000000000
--- a/plugins/chat/test/javascripts/components/user-card-chat-button-test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import hbs from "htmlbars-inline-precompile";
-import { render } from "@ember/test-helpers";
-import { module, test } from "qunit";
-import sinon from "sinon";
-import { exists } from "discourse/tests/helpers/qunit-helpers";
-import User from "discourse/models/user";
-
-module("Discourse Chat | Component | user-card-chat-button", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("when current user can send direct messages", async function (assert) {
-    sinon
-      .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
-      .value(true);
-
-    await render(hbs`<UserCardChatButton/>`);
-
-    assert.true(exists(".user-card-chat-btn"), "it shows the chat button");
-  });
-
-  test("when current user can’t send direct messages", async function (assert) {
-    sinon
-      .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
-      .value(false);
-
-    await render(hbs`<UserCardChatButton/>`);
-
-    assert.false(
-      exists(".user-card-chat-btn"),
-      "it doesn’t show the chat button"
-    );
-  });
-
-  test("when displayed user is suspended", async function (assert) {
-    sinon
-      .stub(this.owner.lookup("service:chat"), "userCanDirectMessage")
-      .value(true);
-
-    this.user = User.create({
-      suspended_till: moment().add(1, "year").toDate(),
-    });
-
-    await render(hbs`<UserCardChatButton @user={{user}}/>`);
-
-    assert.false(
-      exists(".user-card-chat-btn"),
-      "it doesn’t show the chat button"
-    );
-  });
-});