diff --git a/components/jest.config.js b/components/jest.config.js
index b8871840..23d90ef6 100644
--- a/components/jest.config.js
+++ b/components/jest.config.js
@@ -41,6 +41,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',
+    customExportConditions: ["node", "node-addons"],
   },
 
   coverageProvider: 'v8',
diff --git a/components/src/index.js b/components/src/index.js
index 8f802b9d..a992ef1a 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -11,6 +11,7 @@ import navigation from './widgets/navigation/widget.vue';
 import status from './widgets/status/widget.vue';
 import textfield from './widgets/textfield/widget.vue';
 import table from './widgets/table/widget.vue';
+import button from './widgets/button/widget.vue';
 
 import _store from './core/store';
 import _bus from './core/eventBus';
@@ -28,6 +29,7 @@ export const Navigation = navigation;
 export const Status = status;
 export const Textfield = textfield;
 export const Table = table;
+export const Button = button;
 
 export const bus = _bus;
 export const store = _store;
diff --git a/components/src/stories/Button.stories.js b/components/src/stories/Button.stories.js
new file mode 100644
index 00000000..040beae2
--- /dev/null
+++ b/components/src/stories/Button.stories.js
@@ -0,0 +1,29 @@
+import Button from '~widgets/button/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-button', Button);
+
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-button disabled v-bind="args"></ui-button>`,
+  }),
+
+  args: {
+    text: 'Text',
+  },
+};
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: 'text',
+  },
+};
diff --git a/components/src/widgets/button/widget.spec.js b/components/src/widgets/button/widget.spec.js
new file mode 100644
index 00000000..a93a4f60
--- /dev/null
+++ b/components/src/widgets/button/widget.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import Button from './widget';
+
+
+describe('Button widget', () => {
+  let result;
+
+  describe('computed', () => {
+    describe('#style', () => {
+      it('returns the styles', () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.style;
+
+        expect(result).toEqual(`
+  background-color: #2C98F0;
+  color: #FFF;
+`);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('#onClick', () => {
+      it('emits clicked event if it is not disabled', async () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.onClick();
+
+        expect(wrapper.emitted('clicked')).toBeTruthy()
+      });
+    });
+  });
+});
diff --git a/components/src/widgets/button/widget.vue b/components/src/widgets/button/widget.vue
new file mode 100644
index 00000000..5e0271f3
--- /dev/null
+++ b/components/src/widgets/button/widget.vue
@@ -0,0 +1,74 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <button
+    :disabled="disabled"
+    :style="style"
+    @click="onClick"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const emit = defineEmits(['clicked']);
+
+ const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  backgroundColor: {
+    type: String,
+    default: '#2C98F0',
+  },
+  color: {
+    type: String,
+    default: '#FFF',
+  },
+});
+
+const style = computed(() => `
+  background-color: ${props.backgroundColor};
+  color: ${props.color};
+`);
+
+const onClick = () => {
+  if (!props.disabled) emit('clicked');
+};
+
+</script>
+
+<style lang="stylus">
+button {
+  text-transform: uppercase;
+  overflow: hidden;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  border-style: none;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    background-color: #f2f2f2 !important;
+    color: #BDBDBD !important;
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+</style>
+
+
diff --git a/package-lock.json b/package-lock.json
index e40065af..0f9513b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@storybook/vue3": "^7.6.12",
         "@storybook/vue3-webpack5": "^7.6.12",
         "@vue/cli-plugin-babel": "^5.0.8",
+        "@vue/test-utils": "^2.4.4",
         "@vue/vue3-jest": "^29.2.6",
         "ajv": "^8.12.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -3858,6 +3859,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -8008,6 +8015,25 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
       "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.4.tgz",
+      "integrity": "sha512-8jkRxz8pNhClAf4Co4ZrpAoFISdvT3nuSkUlY6Ys6rmTpw3DMWG/X3mw3gQ7QJzgCZO9f+zuE2kW57fi09MW7Q==",
+      "dev": true,
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^1.8.21"
+      },
+      "peerDependencies": {
+        "@vue/server-renderer": "^3.0.1",
+        "vue": "^3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/server-renderer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
       "version": "15.11.1",
@@ -8358,6 +8384,15 @@
       "deprecated": "Use your platform's native atob() and btoa() methods instead",
       "dev": true
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -10208,6 +10243,16 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
@@ -11537,6 +11582,90 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+      "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+      "dev": true,
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/editorconfig/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14386,6 +14515,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
     "node_modules/internal-slot": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
@@ -17216,6 +17351,26 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-beautify": {
+      "version": "1.14.11",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.11.tgz",
+      "integrity": "sha512-rPogWqAfoYh1Ryqqh2agUpVfbxAhbjuN1SmU86dskQUKouRiggUTCO4+2ym9UPXllc2WAp0J+T5qxn7Um3lCdw==",
+      "dev": true,
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.3",
+        "glob": "^10.3.3",
+        "nopt": "^7.2.0"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -18553,6 +18708,21 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
+    "node_modules/nopt": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.0.tgz",
+      "integrity": "sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -20227,6 +20397,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
diff --git a/package.json b/package.json
index 182ce3f9..2f94246a 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@storybook/vue3": "^7.6.12",
     "@storybook/vue3-webpack5": "^7.6.12",
     "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/test-utils": "^2.4.4",
     "@vue/vue3-jest": "^29.2.6",
     "ajv": "^8.12.0",
     "babel-core": "^7.0.0-bridge.0",