diff --git a/src/transforms/buttonElementToComponent/buttonElementToComponent.ts b/src/transforms/buttonElementToComponent/buttonElementToComponent.ts
new file mode 100644
index 00000000..6465aabe
--- /dev/null
+++ b/src/transforms/buttonElementToComponent/buttonElementToComponent.ts
@@ -0,0 +1,33 @@
+import signale from 'signale'
+
+import { CodemodResult, CodemodOptions } from '../../types'
+import { formatWithPrettierEslint } from '../../utils'
+import { addClassNamesUtilImportIfNeeded } from '../../utils/classNamesUtility'
+
+/**
+ * Convert `<button class="btn-primary" />` element to the `<Button variant="primary" />` component.
+ */
+export async function buttonElementToComponent(options: CodemodOptions): CodemodResult {
+    const { project, shouldWriteFiles } = options
+
+    const codemodResultPromises = project.getSourceFiles().map(tsSourceFile => {
+        const tsFilePath = tsSourceFile.getFilePath()
+
+        signale.info(`Processing file "${tsFilePath}"`)
+
+        /* implement transform function here */
+
+        addClassNamesUtilImportIfNeeded(tsSourceFile)
+        formatWithPrettierEslint(tsSourceFile)
+
+        return {
+            ts: {
+                source: tsSourceFile.getFullText(),
+                path: tsSourceFile.getFilePath(),
+            },
+            fsWritePromise: shouldWriteFiles ? Promise.all([tsSourceFile.save()]) : undefined,
+        }
+    })
+
+    return Promise.all(codemodResultPromises)
+}
diff --git a/src/transforms/buttonElementToComponent/index.ts b/src/transforms/buttonElementToComponent/index.ts
new file mode 100644
index 00000000..29a2726a
--- /dev/null
+++ b/src/transforms/buttonElementToComponent/index.ts
@@ -0,0 +1 @@
+export * from './buttonElementToComponent'
diff --git a/src/transforms/index.ts b/src/transforms/index.ts
index 451f468e..c9b1163c 100644
--- a/src/transforms/index.ts
+++ b/src/transforms/index.ts
@@ -1,7 +1,9 @@
+import { buttonElementToComponent } from './buttonElementToComponent'
 import { classNameTemplateToClassnamesCall } from './classNameTemplateToClassnamesCall'
 import { globalCssToCssModule } from './globalCssToCssModule/globalCssToCssModule'
 
 export const transforms = {
+    buttonElementToComponent,
     globalCssToCssModule,
     classNameTemplateToClassnamesCall,
 } as const