diff --git a/web/src/recent_view_ui.ts b/web/src/recent_view_ui.ts
index a0ea6d05d4..c5117c004a 100644
--- a/web/src/recent_view_ui.ts
+++ b/web/src/recent_view_ui.ts
@@ -1022,7 +1022,7 @@ export function update_topic_unread_count(message: Message): void {
 export function set_filter(filter: string): void {
     // This function updates the `filters` variable
     // after user clicks on one of the filter buttons
-    // based on `btn-recent-selected` class and current
+    // based on `button-recent-selected` class and current
     // set `filters`.
 
     // Get the button which was clicked.
@@ -1030,7 +1030,7 @@ export function set_filter(filter: string): void {
         `[data-filter="${CSS.escape(filter)}"]`,
     );
 
-    if ($filter_elem.hasClass("btn-recent-selected")) {
+    if ($filter_elem.hasClass("button-recent-selected")) {
         filters.delete(filter);
         // If the button was not selected, we add the filter.
     } else {
@@ -1041,12 +1041,12 @@ export function set_filter(filter: string): void {
 }
 
 function show_selected_filters(): void {
-    // Add `btn-selected-filter` to the buttons to show
+    // Add `button-recent-selected` to the buttons to show
     // which filters are applied.
     for (const filter of filters) {
         $("#recent_view_filter_buttons")
             .find(`[data-filter="${CSS.escape(filter)}"]`)
-            .addClass("btn-recent-selected")
+            .addClass("button-recent-selected")
             .attr("aria-checked", "true");
     }
 }
@@ -1571,7 +1571,7 @@ export function change_focused_element($elt: JQuery, input_key: string): boolean
 
             if (
                 post_tab_focus_elem.id === "recent_view_search" ||
-                post_tab_focus_elem.classList.contains("btn-recent-filters") ||
+                post_tab_focus_elem.classList.contains("button-recent-filters") ||
                 post_tab_focus_elem.classList.contains("dropdown-widget-button")
             ) {
                 $current_focus_elem = $(post_tab_focus_elem);
@@ -1648,7 +1648,7 @@ export function change_focused_element($elt: JQuery, input_key: string): boolean
                 set_table_focus(row_focus, col_focus);
                 return true;
         }
-    } else if ($elt.hasClass("btn-recent-filters") || $elt.hasClass("dropdown-widget-button")) {
+    } else if ($elt.hasClass("button-recent-filters") || $elt.hasClass("dropdown-widget-button")) {
         switch (input_key) {
             case "click":
                 $current_focus_elem = $elt;
@@ -1747,7 +1747,7 @@ export function change_focused_element($elt: JQuery, input_key: string): boolean
     }
     if ($current_focus_elem !== "table" && input_key !== "escape") {
         $current_focus_elem.trigger("focus");
-        if ($current_focus_elem.hasClass("btn-recent-filters")) {
+        if ($current_focus_elem.hasClass("button-recent-filters")) {
             compose_closed_ui.set_standard_text_for_reply_button();
         }
         return true;
@@ -1838,7 +1838,7 @@ export function initialize({
 
     $("body").on("keydown", ".on_hover_topic_read", ui_util.convert_enter_to_click);
 
-    $("body").on("click", ".btn-recent-filters", (e) => {
+    $("body").on("click", ".button-recent-filters", (e) => {
         e.stopPropagation();
         if (page_params.is_spectator) {
             // Filter buttons are disabled for spectator.
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index cce37efb8b..489dbd021f 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -509,7 +509,7 @@
         background-color: hsl(211deg 18% 25%) !important;
     }
 
-    .recent_view_container #recent_view_table .btn-recent-filters {
+    .recent_view_container #recent_view_table .button-recent-filters {
         background-color: hsl(211deg 29% 14%);
         border-color: hsl(0deg 0% 0%);
         color: hsl(0deg 0% 100%);
@@ -530,7 +530,7 @@
         }
     }
 
-    .btn-recent-selected,
+    .button-recent-selected,
     #recent_view_table thead th {
         background-color: hsl(228deg 11% 17%) !important;
 
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index b96b66eeb7..f2ae4d5264 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -161,7 +161,7 @@
         padding-top: 4px !important;
     }
 
-    .btn-recent-filters {
+    .button-recent-filters {
         border-radius: 40px;
         margin: 0 5px 10px 0;
 
@@ -181,7 +181,7 @@
         }
     }
 
-    .btn-recent-selected {
+    .button-recent-selected {
         background-color: hsl(0deg 11% 93%);
     }
 
diff --git a/web/templates/recent_view_filters.hbs b/web/templates/recent_view_filters.hbs
index 420ec1c00c..5960cbd2cd 100644
--- a/web/templates/recent_view_filters.hbs
+++ b/web/templates/recent_view_filters.hbs
@@ -1,5 +1,5 @@
 {{> ./dropdown_widget widget_name="recent-view-filter"}}
-<button data-filter="include_private" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="true">
+<button data-filter="include_private" type="button" class="btn btn-default button-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="true">
     {{#if filter_pm}}
     <i class="fa fa-check-square-o"></i>
     {{else}}
@@ -7,7 +7,7 @@
     {{/if}}
     {{t 'Include DMs' }}
 </button>
-<button data-filter="unread" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
+<button data-filter="unread" type="button" class="btn btn-default button-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
     {{#if filter_unread}}
     <i class="fa fa-check-square-o"></i>
     {{else}}
@@ -15,7 +15,7 @@
     {{/if}}
     {{t 'Unread' }}
 </button>
-<button data-filter="participated" type="button" class="btn btn-default btn-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
+<button data-filter="participated" type="button" class="btn btn-default button-recent-filters {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false">
     {{#if filter_participated}}
     <i class="fa fa-check-square-o"></i>
     {{else}}
diff --git a/web/tests/recent_view.test.cjs b/web/tests/recent_view.test.cjs
index 91de5a3aae..8357cb7910 100644
--- a/web/tests/recent_view.test.cjs
+++ b/web/tests/recent_view.test.cjs
@@ -772,7 +772,7 @@ test("test_filter_participated", ({mock_template}) => {
     // remove muted filter
     rt.set_filter("muted");
 
-    $("#recent_view_filter_buttons").removeClass("btn-recent-selected");
+    $("#recent_view_filter_buttons").removeClass("button-recent-selected");
 
     expected_filter_participated = true;