diff --git a/packages/cxl-ui/src/components/cxl-button.js b/packages/cxl-ui/src/components/cxl-button.js
new file mode 100644
index 000000000..f558ae2ce
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-button.js
@@ -0,0 +1,38 @@
+import { Button } from '@vaadin/button';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('cxl-button')
+export class CXLButton extends Button {
+  static get properties() {
+    return {
+      ...super.properties,
+      href: {
+        type: String,
+      },
+      target: {
+        type: String,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+
+    // Adds the ability to use the button as a link
+    if (this.href) {
+      this.addEventListener('click', () => {
+        const el = document.createElement('a');
+        el.setAttribute('href', this.href);
+
+        if (this.target) el.setAttribute('target', this.target);
+
+        el.innerHTML = this.innerHTML;
+        el.click();
+      });
+    }
+  }
+
+  static get is() {
+    return 'cxl-button';
+  }
+}
diff --git a/packages/storybook/cxl-ui/cxl-button.stories.js b/packages/storybook/cxl-ui/cxl-button.stories.js
new file mode 100644
index 000000000..0a9f2ae75
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-button.stories.js
@@ -0,0 +1,19 @@
+import '@conversionxl/cxl-ui/src/components/cxl-button.js';
+import { html } from 'lit';
+
+export default {
+  title: 'CXL UI/cxl-button',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const CXLButton = ({ href, target }) => html`
+  <cxl-button href=${href} target=${target}>Button</cxl-button>
+`;
+
+CXLButton.storyName = 'cxl-button';
+CXLButton.args = {
+  href: 'https://cxl.com',
+  target: '_blank',
+};