diff --git a/lib/banzai/filter/task_list_filter.rb b/lib/banzai/filter/task_list_filter.rb
index c6b402575cb0dc7aa55bac4f1d9fe6af1ef993c2..896f67cb8759c40abb2a41c2caaa3bbefae12cec 100644
--- a/lib/banzai/filter/task_list_filter.rb
+++ b/lib/banzai/filter/task_list_filter.rb
@@ -9,6 +9,9 @@
 module Banzai
   module Filter
     class TaskListFilter < TaskList::Filter
+      def render_item_checkbox(item)
+        "<task-button></task-button>#{super}"
+      end
     end
   end
 end
diff --git a/spec/fixtures/markdown/markdown_golden_master_examples.yml b/spec/fixtures/markdown/markdown_golden_master_examples.yml
index 630528e03731e99c3346a75d7f43f384088fc3c9..8556811974dc5eb2f92f3a80d314e4b6b47bd085 100644
--- a/spec/fixtures/markdown/markdown_golden_master_examples.yml
+++ b/spec/fixtures/markdown/markdown_golden_master_examples.yml
@@ -218,13 +218,13 @@
     </ol>
     <ul data-sourcepos="7:1-9:47" class="task-list" dir="auto">
     <li data-sourcepos="7:1-7:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/1.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/1.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/1.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/1.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
     </li>
     <li data-sourcepos="8:1-8:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/2.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/2.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/2.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/2.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
     </li>
     <li data-sourcepos="9:1-9:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container video-container"><video src="https://gitlab.com/3.mp4" controls="true" data-setup="{}" data-title="Sample Video" width="400" preload="metadata"></video><a href="https://gitlab.com/3.mp4" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Video'">Sample Video</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container video-container"><video src="https://gitlab.com/3.mp4" controls="true" data-setup="{}" data-title="Sample Video" width="400" preload="metadata"></video><a href="https://gitlab.com/3.mp4" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Video'">Sample Video</a></span>
     </li>
     </ul>
 
@@ -670,19 +670,19 @@
   html: |-
     <ol data-sourcepos="1:1-6:18" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:12" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:12" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example
     <ol data-sourcepos="4:4-6:18" class="task-list">
     <li data-sourcepos="4:4-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> of nested
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> of nested
     <ol data-sourcepos="5:7-6:18" class="task-list">
     <li data-sourcepos="5:7-5:22" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
     <li data-sourcepos="6:7-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
     </ol>
     </li>
     </ol>
@@ -697,11 +697,11 @@
   html: |-
     <ol start="4893" data-sourcepos="1:1-3:17" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-3:17" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example</li>
     </ol>
 
 - name: reference_for_project_wiki
@@ -810,19 +810,19 @@
   html: |-
     <ul data-sourcepos="1:1-6:15" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:11" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:11" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example
     <ul data-sourcepos="4:3-6:15" class="task-list">
     <li data-sourcepos="4:3-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> of nested
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> of nested
     <ul data-sourcepos="5:5-6:15" class="task-list">
     <li data-sourcepos="5:5-5:19" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
     <li data-sourcepos="6:5-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
     </ul>
     </li>
     </ul>
diff --git a/spec/lib/banzai/filter/task_list_filter_spec.rb b/spec/lib/banzai/filter/task_list_filter_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..c89acd1a643d8e1a0e4324aadfa217dd2f24760d
--- /dev/null
+++ b/spec/lib/banzai/filter/task_list_filter_spec.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Banzai::Filter::TaskListFilter do
+  include FilterSpecHelper
+
+  it 'adds `<task-button></task-button>` to every list item' do
+    doc = filter("<ul data-sourcepos=\"1:1-2:20\">\n<li data-sourcepos=\"1:1-1:20\">[ ] testing item 1</li>\n<li data-sourcepos=\"2:1-2:20\">[x] testing item 2</li>\n</ul>")
+
+    expect(doc.xpath('.//li//task-button').count).to eq(2)
+  end
+end