diff --git a/package-lock.json b/package-lock.json
index ac8130ea40..bd30789cd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3883,6 +3883,10 @@
       "resolved": "packages/bump-version-for-cron",
       "link": true
     },
+    "node_modules/@k8slens/button": {
+      "resolved": "packages/ui-components/button",
+      "link": true
+    },
     "node_modules/@k8slens/cluster-settings": {
       "resolved": "packages/cluster-settings",
       "link": true
@@ -35927,6 +35931,7 @@
       "peerDependencies": {
         "@k8slens/application": "^6.5.0-alpha.0",
         "@k8slens/application-for-electron-main": "^6.5.0-alpha.0",
+        "@k8slens/button": "^1.0.0-alpha.0",
         "@k8slens/cluster-settings": "^6.5.0-alpha.1",
         "@k8slens/kubectl-versions": "^1.0.0-alpha.0",
         "@k8slens/legacy-extensions": "^1.0.0-alpha.0",
@@ -37124,6 +37129,72 @@
         "react-dom": "^17.0.2"
       }
     },
+    "packages/ui-components/button": {
+      "name": "@k8slens/button",
+      "version": "1.0.0-alpha.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@async-fn/jest": "^1.6.4",
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/user-event": "^12.8.3"
+      },
+      "peerDependencies": {
+        "@k8slens/tooltip": "^1.0.0-alpha.0",
+        "@k8slens/utilities": "^1.0.0-alpha.1",
+        "auto-bind": "^4.0.0",
+        "lodash": "^4.17.21",
+        "mobx": "^6.8.0",
+        "mobx-react": "^7.6.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
+    "packages/ui-components/button/node_modules/@k8slens/eslint-config": {
+      "version": "6.5.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@k8slens/eslint-config/-/eslint-config-6.5.0-alpha.1.tgz",
+      "integrity": "sha512-6DdfKe/iafX85GBK/UlKgz29FOIOp/UVS03bFGLyw7Vmm7pauB0FEHTAdbr3g1qG/Zcn6nxhOM3uqQyRY/uEyA==",
+      "dev": true,
+      "bin": {
+        "lens-lint": "bin/lint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">= 5",
+        "@typescript-eslint/parser": ">= 5",
+        "eslint": ">= 7",
+        "eslint-config-airbnb-typescript": ">= 17",
+        "eslint-config-prettier": ">= 8",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-import": ">= 2",
+        "eslint-plugin-jest": ">= 27",
+        "eslint-plugin-jsx-a11y": ">= 6",
+        "eslint-plugin-no-unsanitized": ">= 4.0.2",
+        "eslint-plugin-prettier": ">= 4",
+        "eslint-plugin-react-hooks": ">= 4",
+        "eslint-plugin-security": ">= 1.6.0",
+        "eslint-plugin-simple-import-sort": ">= 7",
+        "eslint-plugin-unused-imports": ">= 2",
+        "eslint-plugin-xss": ">= 0.1.12",
+        "prettier": ">= 2"
+      }
+    },
+    "packages/ui-components/button/node_modules/@testing-library/user-event": {
+      "version": "12.8.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
+      "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "packages/ui-components/tooltip": {
       "name": "@k8slens/tooltip",
       "version": "1.0.0-alpha.0",
diff --git a/packages/core/package.json b/packages/core/package.json
index ed8002974c..75235a6113 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -323,6 +323,7 @@
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
     "@k8slens/test-utils": "^1.0.0-alpha.1",
     "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "@k8slens/button": "^1.0.0-alpha.0",
     "@k8slens/utilities": "^1.0.0-alpha.1",
     "@ogre-tools/fp": "^15.3.1",
     "@ogre-tools/injectable": "^15.3.1",
diff --git a/packages/core/src/extensions/renderer-api/components.ts b/packages/core/src/extensions/renderer-api/components.ts
index e1773b6eff..3d59f9d133 100644
--- a/packages/core/src/extensions/renderer-api/components.ts
+++ b/packages/core/src/extensions/renderer-api/components.ts
@@ -36,7 +36,6 @@ export * from "../../renderer/components/layout/wizard-layout";
 export * from "../../renderer/components/layout/tab-layout";
 
 // form-controls
-export * from "../../renderer/components/button";
 export * from "../../renderer/components/checkbox";
 export * from "../../renderer/components/radio";
 export * from "../../renderer/components/select";
diff --git a/packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx b/packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx
index 83daa606e3..c5fa9fb60e 100644
--- a/packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx
+++ b/packages/core/src/features/application-update/child-features/force-update/renderer/force-update-modal/force-update-modal.tsx
@@ -10,7 +10,7 @@ import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
 import installUpdateCountdownInjectable from "./install-update-countdown.injectable";
 import { Dialog } from "../../../../../../renderer/components/dialog";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import styles from "./force-update-modal.module.scss";
 
 interface Dependencies {
diff --git a/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx b/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx
index 1167beae0a..7ba5f360e6 100644
--- a/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx
+++ b/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-dialog-content.tsx
@@ -17,7 +17,7 @@ import type { IObservableValue } from "mobx";
 import { action } from "mobx";
 import submitCustomHelmRepositoryInjectable from "./submit-custom-helm-repository.injectable";
 import hideDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/hide-dialog-for-adding-custom-helm-repository.injectable";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../../../../../../renderer/components/icon";
 import maximalCustomHelmRepoOptionsAreShownInjectable from "./maximal-custom-helm-repo-options-are-shown.injectable";
 import { SubTitle } from "../../../../../../renderer/components/layout/sub-title";
diff --git a/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx b/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx
index d81dfbe4c9..506ddf095d 100644
--- a/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx
+++ b/packages/core/src/features/helm-charts/child-features/preferences/renderer/adding-of-custom-helm-repository/adding-of-custom-helm-repository-open-button.tsx
@@ -4,7 +4,7 @@
  */
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { Button } from "../../../../../../renderer/components/button";
+import { Button } from "@k8slens/button";
 import showDialogForAddingCustomHelmRepositoryInjectable from "./dialog-visibility/show-dialog-for-adding-custom-helm-repository.injectable";
 
 interface Dependencies {
diff --git a/packages/core/src/renderer/components/+add-cluster/add-cluster.tsx b/packages/core/src/renderer/components/+add-cluster/add-cluster.tsx
index 4ec5ced863..073523439e 100644
--- a/packages/core/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/packages/core/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -15,7 +15,7 @@ import * as uuid from "uuid";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { isDefined, iter } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
 import { MonacoEditor } from "../monaco-editor";
diff --git a/packages/core/src/renderer/components/+config-maps/config-map-details.tsx b/packages/core/src/renderer/components/+config-maps/config-map-details.tsx
index 569a525900..a770f6d324 100644
--- a/packages/core/src/renderer/components/+config-maps/config-map-details.tsx
+++ b/packages/core/src/renderer/components/+config-maps/config-map-details.tsx
@@ -10,7 +10,7 @@ import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ConfigMap } from "../../../common/k8s-api/endpoints";
 import type { Logger } from "../../../common/logger";
diff --git a/packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx b/packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx
index 21ee1bde3c..9a2bbb487d 100644
--- a/packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx
+++ b/packages/core/src/renderer/components/+config-resource-quotas/add-dialog/view.tsx
@@ -17,7 +17,7 @@ import { systemName } from "../../input/input_validators";
 import type { IResourceQuotaValues, ResourceQuotaApi } from "../../../../common/k8s-api/endpoints";
 import { Select } from "../../select";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { SubTitle } from "../../layout/sub-title";
 import { withInjectables } from "@ogre-tools/injectable-react";
diff --git a/packages/core/src/renderer/components/+config-secrets/secret-details.tsx b/packages/core/src/renderer/components/+config-secrets/secret-details.tsx
index 57a7a51063..fcf5f7ce18 100644
--- a/packages/core/src/renderer/components/+config-secrets/secret-details.tsx
+++ b/packages/core/src/renderer/components/+config-secrets/secret-details.tsx
@@ -10,7 +10,7 @@ import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { base64, toggle } from "@k8slens/utilities";
 import { Icon } from "../icon";
diff --git a/packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx b/packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx
index 053892d7ab..3ea0002af9 100644
--- a/packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx
+++ b/packages/core/src/renderer/components/+extensions/attempt-install/attempt-install.injectable.tsx
@@ -15,7 +15,7 @@ import extensionInstallationStateStoreInjectable from "../../../../extensions/ex
 import type { Disposer } from "@k8slens/utilities";
 import { disposer } from "@k8slens/utilities";
 import type { ShowNotification } from "../../notifications";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import type { ExtensionLoader } from "../../../../extensions/extension-loader";
 import React from "react";
 import { remove as removeDir } from "fs-extra";
diff --git a/packages/core/src/renderer/components/+extensions/install.tsx b/packages/core/src/renderer/components/+extensions/install.tsx
index 8c15430c00..946a0572fa 100644
--- a/packages/core/src/renderer/components/+extensions/install.tsx
+++ b/packages/core/src/renderer/components/+extensions/install.tsx
@@ -6,7 +6,7 @@
 import styles from "./install.module.scss";
 import React, { useEffect, useRef, useState } from "react";
 import { prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { observer } from "mobx-react";
 import { Input, InputValidators } from "../input";
diff --git a/packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx b/packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx
index 15add2c2ea..ef331a133a 100644
--- a/packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx
+++ b/packages/core/src/renderer/components/+helm-charts/helm-chart-details.tsx
@@ -12,7 +12,7 @@ import { Drawer, DrawerItem } from "../drawer";
 import { stopPropagation } from "@k8slens/utilities";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Select } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
diff --git a/packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx b/packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx
index 5f7a3bda70..9ec1ea7e9a 100644
--- a/packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx
+++ b/packages/core/src/renderer/components/+helm-releases/release-details/release-details-content.tsx
@@ -14,7 +14,7 @@ import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ConfigurationInput, MinimalResourceGroup, OnlyUserSuppliedValuesAreShownToggle, ReleaseDetailsModel } from "./release-details-model/release-details-model.injectable";
 import releaseDetailsModelInjectable from "./release-details-model/release-details-model.injectable";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { kebabCase } from "lodash/fp";
 import { Badge } from "../../badge";
 import { SubTitle } from "../../layout/sub-title";
diff --git a/packages/core/src/renderer/components/+network-services/service-port-component.tsx b/packages/core/src/renderer/components/+network-services/service-port-component.tsx
index 7b2c5bdfba..0aba62ca37 100644
--- a/packages/core/src/renderer/components/+network-services/service-port-component.tsx
+++ b/packages/core/src/renderer/components/+network-services/service-port-component.tsx
@@ -11,7 +11,7 @@ import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";
diff --git a/packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx b/packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx
index 74bced05fb..cba2276b22 100644
--- a/packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx
+++ b/packages/core/src/renderer/components/+workloads-pods/pod-container-port.tsx
@@ -11,7 +11,7 @@ import type { ContainerPort, Pod } from "../../../common/k8s-api/endpoints";
 import { action, makeObservable, observable, reaction } from "mobx";
 import { cssNames } from "@k8slens/utilities";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ForwardedPort, PortForwardStore } from "../../port-forward";
 import { predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";
diff --git a/packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx b/packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx
index b1d7b68d32..99d3f64b8d 100644
--- a/packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx
+++ b/packages/core/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx
@@ -7,7 +7,7 @@ import "./add-remove-buttons.scss";
 
 import React from "react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 
 export interface AddRemoveButtonsProps extends React.HTMLAttributes<any> {
diff --git a/packages/core/src/renderer/components/cluster-manager/cluster-status.tsx b/packages/core/src/renderer/components/cluster-manager/cluster-status.tsx
index 1704d2c604..381fd116aa 100644
--- a/packages/core/src/renderer/components/cluster-manager/cluster-status.tsx
+++ b/packages/core/src/renderer/components/cluster-manager/cluster-status.tsx
@@ -12,7 +12,7 @@ import { ipcRendererOn } from "../../../common/ipc";
 import type { Cluster } from "../../../common/cluster/cluster";
 import type { IClassName } from "@k8slens/utilities";
 import { hasTypedProperty, isObject, isString, cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";
diff --git a/packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx b/packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx
index d8bd68f938..bf1cd16904 100644
--- a/packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx
+++ b/packages/core/src/renderer/components/cluster-settings/metrics-setting.tsx
@@ -7,7 +7,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { onMultiSelectFor, Select } from "../select/select";
 import { Icon } from "../icon/icon";
-import { Button } from "../button/button";
+import { Button } from "@k8slens/button";
 import { SubTitle } from "../layout/sub-title";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { observable, reaction, makeObservable } from "mobx";
diff --git a/packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx b/packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx
index 3524d33450..9494b17ee7 100644
--- a/packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx
+++ b/packages/core/src/renderer/components/confirm-dialog/confirm-dialog.tsx
@@ -11,8 +11,8 @@ import type { IObservableValue } from "mobx";
 import { observable, makeObservable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "@k8slens/utilities";
-import type { ButtonProps } from "../button";
-import { Button } from "../button";
+import type { ButtonProps } from "@k8slens/button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
diff --git a/packages/core/src/renderer/components/delete-cluster-dialog/view.tsx b/packages/core/src/renderer/components/delete-cluster-dialog/view.tsx
index 69666efede..6b781adde6 100644
--- a/packages/core/src/renderer/components/delete-cluster-dialog/view.tsx
+++ b/packages/core/src/renderer/components/delete-cluster-dialog/view.tsx
@@ -9,7 +9,7 @@ import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { ShowNotification } from "../notifications";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
diff --git a/packages/core/src/renderer/components/dialog/logs-dialog.tsx b/packages/core/src/renderer/components/dialog/logs-dialog.tsx
index cd1861db77..22edddabb7 100644
--- a/packages/core/src/renderer/components/dialog/logs-dialog.tsx
+++ b/packages/core/src/renderer/components/dialog/logs-dialog.tsx
@@ -10,7 +10,7 @@ import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import type { ShowNotification } from "../notifications";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { clipboard } from "electron";
 import { kebabCase } from "lodash/fp";
diff --git a/packages/core/src/renderer/components/dock/info-panel.tsx b/packages/core/src/renderer/components/dock/info-panel.tsx
index 0b951d8722..632ba7d99a 100644
--- a/packages/core/src/renderer/components/dock/info-panel.tsx
+++ b/packages/core/src/renderer/components/dock/info-panel.tsx
@@ -10,7 +10,7 @@ import React, { Component } from "react";
 import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import type { DockStore, TabId } from "./dock/store";
diff --git a/packages/core/src/renderer/components/dock/install-chart/view.tsx b/packages/core/src/renderer/components/dock/install-chart/view.tsx
index d478febd55..b434791961 100644
--- a/packages/core/src/renderer/components/dock/install-chart/view.tsx
+++ b/packages/core/src/renderer/components/dock/install-chart/view.tsx
@@ -12,7 +12,7 @@ import { Badge } from "../../badge";
 import { NamespaceSelect } from "../../+namespaces/namespace-select";
 import { prevDefault } from "@k8slens/utilities";
 import { Icon } from "../../icon";
-import { Button } from "../../button";
+import { Button } from "@k8slens/button";
 import { LogsDialog } from "../../dialog/logs-dialog";
 import { Select } from "../../select";
 import { Input } from "../../input";
diff --git a/packages/core/src/renderer/components/error-boundary/error-boundary.tsx b/packages/core/src/renderer/components/error-boundary/error-boundary.tsx
index 4d732a3ded..6621923cfe 100644
--- a/packages/core/src/renderer/components/error-boundary/error-boundary.tsx
+++ b/packages/core/src/renderer/components/error-boundary/error-boundary.tsx
@@ -8,7 +8,7 @@ import "./error-boundary.scss";
 import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
 import type { SingleOrMany } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";
diff --git a/packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx b/packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
index 69a6cdcbd2..e562900f64 100644
--- a/packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
+++ b/packages/core/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx
@@ -8,7 +8,7 @@ import React from "react";
 import type { IObservableValue } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import type { DialogProps } from "../dialog";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
diff --git a/packages/core/src/renderer/components/path-picker/path-picker.tsx b/packages/core/src/renderer/components/path-picker/path-picker.tsx
index 60ff28eb4d..6323d735a8 100644
--- a/packages/core/src/renderer/components/path-picker/path-picker.tsx
+++ b/packages/core/src/renderer/components/path-picker/path-picker.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import type { OpenPathPickingDialog } from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import openPathPickingDialogInjectable from "../../../features/path-picking-dialog/renderer/pick-paths.injectable";
 import { cssNames } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 
 export interface PathPickOpts {
   message: string;
diff --git a/packages/core/src/renderer/components/wizard/wizard.tsx b/packages/core/src/renderer/components/wizard/wizard.tsx
index 0e58e12ece..bd03921f88 100755
--- a/packages/core/src/renderer/components/wizard/wizard.tsx
+++ b/packages/core/src/renderer/components/wizard/wizard.tsx
@@ -6,7 +6,7 @@
 import "./wizard.scss";
 import React from "react";
 import { cssNames, prevDefault } from "@k8slens/utilities";
-import { Button } from "../button";
+import { Button } from "@k8slens/button";
 import { Stepper } from "../stepper";
 import { SubTitle } from "../layout/sub-title";
 import { Spinner } from "../spinner";
diff --git a/packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx b/packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
index f8c850e7f1..7b1e4303a7 100644
--- a/packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
+++ b/packages/core/src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
 import type { ListNamespaceForbiddenArgs } from "../../common/ipc/cluster";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import type { IpcRendererEvent } from "electron";
 import React from "react";
 import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
diff --git a/packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx b/packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx
index 4cec9bf4c5..f174f9019d 100644
--- a/packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx
+++ b/packages/core/src/renderer/port-forward/about-port-forwarding.injectable.tsx
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import React from "react";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
-import { Button } from "../components/button";
+import { Button } from "@k8slens/button";
 import showSuccessNotificationInjectable from "../components/notifications/show-success-notification.injectable";
 
 const aboutPortForwardingInjectable = getInjectable({
diff --git a/packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx b/packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx
index af2b7577e5..6763f3b268 100644
--- a/packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx
+++ b/packages/core/src/renderer/port-forward/notify-error-port-forwarding.injectable.tsx
@@ -6,7 +6,7 @@ import { getInjectable } from "@ogre-tools/injectable";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import showErrorNotificationInjectable from "../components/notifications/show-error-notification.injectable";
 import React from "react";
-import { Button } from "../components/button";
+import { Button } from from "@k8slens/button";
 
 const notifyErrorPortForwardingInjectable = getInjectable({
   id: "notify-error-port-forwarding",
diff --git a/packages/open-lens/src/renderer/index.ts b/packages/open-lens/src/renderer/index.ts
index 2446390d29..5e7c2f0776 100644
--- a/packages/open-lens/src/renderer/index.ts
+++ b/packages/open-lens/src/renderer/index.ts
@@ -1,4 +1,5 @@
 import "@k8slens/core/styles";
+import "@k8slens/button/dist/index.css";
 import "@k8slens/tooltip/dist/index.css";
 import { runInAction } from "mobx";
 import {
diff --git a/packages/ui-components/button/.eslintrc.json b/packages/ui-components/button/.eslintrc.json
new file mode 100644
index 0000000000..b15115cb69
--- /dev/null
+++ b/packages/ui-components/button/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}
diff --git a/packages/ui-components/button/.prettierrc b/packages/ui-components/button/.prettierrc
new file mode 100644
index 0000000000..edd47b479e
--- /dev/null
+++ b/packages/ui-components/button/.prettierrc
@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"
diff --git a/packages/ui-components/button/.swcrc b/packages/ui-components/button/.swcrc
new file mode 100644
index 0000000000..4dd5c11a89
--- /dev/null
+++ b/packages/ui-components/button/.swcrc
@@ -0,0 +1,19 @@
+{
+  "module": {
+    "type": "commonjs"
+  },
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": false
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "target": "es2019"
+  }
+}
+
diff --git a/packages/ui-components/button/README.md b/packages/ui-components/button/README.md
new file mode 100644
index 0000000000..d0e0af8c72
--- /dev/null
+++ b/packages/ui-components/button/README.md
@@ -0,0 +1,16 @@
+# @k8slens/button
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/button
+```
+
+```typescript
+import type { ButtonProps } from "@k8slens/button";
+import { Button } from "@k8slens/button";
+```
+
+## Extendability
diff --git a/packages/ui-components/button/index.ts b/packages/ui-components/button/index.ts
new file mode 100644
index 0000000000..74e169183b
--- /dev/null
+++ b/packages/ui-components/button/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./src/button";
\ No newline at end of file
diff --git a/packages/ui-components/button/jest.config.js b/packages/ui-components/button/jest.config.js
new file mode 100644
index 0000000000..05ec7ecd4d
--- /dev/null
+++ b/packages/ui-components/button/jest.config.js
@@ -0,0 +1,3 @@
+const { configForReact } = require("@k8slens/jest").monorepoPackageConfig(__dirname);
+
+module.exports = configForReact;
diff --git a/packages/ui-components/button/package.json b/packages/ui-components/button/package.json
new file mode 100644
index 0000000000..a167108f7e
--- /dev/null
+++ b/packages/ui-components/button/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@k8slens/button",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Highly extendable button in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@k8slens/tooltip": "^1.0.0-alpha.0",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^12.8.3"
+  }
+}
diff --git a/packages/core/src/renderer/components/button/button.scss b/packages/ui-components/button/src/button.scss
similarity index 94%
rename from packages/core/src/renderer/components/button/button.scss
rename to packages/ui-components/button/src/button.scss
index cd46e2da86..5bafe0f396 100644
--- a/packages/core/src/renderer/components/button/button.scss
+++ b/packages/ui-components/button/src/button.scss
@@ -12,12 +12,12 @@
   text-align: center;
   text-decoration: none;
   cursor: pointer;
-  border-radius: $radius;
+  border-radius: var(--border-radius);
   background: var(--buttonDefaultBackground);
-  padding: round($padding * .9) $padding * 1.5;
+  padding: round(8px * .9) 8px * 1.5;
   flex-shrink: 0;
   line-height: 1;
-  font-size: $font-size;
+  font-size: var(--font-size);
   user-select: none;
 
   &[href] {
@@ -66,7 +66,7 @@
   }
 
   &.big {
-    font-size: 2.2 * $unit;
+    font-size: 2.2 * 8px;
     border-radius: 50px;
     padding: .75em 1em;
   }
diff --git a/packages/core/src/renderer/components/button/button.tsx b/packages/ui-components/button/src/button.tsx
similarity index 100%
rename from packages/core/src/renderer/components/button/button.tsx
rename to packages/ui-components/button/src/button.tsx
diff --git a/packages/core/src/renderer/components/button/index.ts b/packages/ui-components/button/src/index.ts
similarity index 100%
rename from packages/core/src/renderer/components/button/index.ts
rename to packages/ui-components/button/src/index.ts
diff --git a/packages/ui-components/button/tailwind.config.js b/packages/ui-components/button/tailwind.config.js
new file mode 100644
index 0000000000..59cf6201b3
--- /dev/null
+++ b/packages/ui-components/button/tailwind.config.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+const path = require('path');
+
+module.exports = {
+  content: [
+    path.join(__dirname, "src/**/*.tsx")
+  ],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/ui-components/button/tsconfig.json b/packages/ui-components/button/tsconfig.json
new file mode 100644
index 0000000000..9e140d79da
--- /dev/null
+++ b/packages/ui-components/button/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}
diff --git a/packages/ui-components/button/webpack.config.js b/packages/ui-components/button/webpack.config.js
new file mode 100644
index 0000000000..1cda407f5a
--- /dev/null
+++ b/packages/ui-components/button/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;