diff --git a/packages/vue-component-library/src/lib-components/ButtonSubmit.vue b/packages/vue-component-library/src/lib-components/ButtonSubmit.vue
new file mode 100644
index 000000000..3de17d6a5
--- /dev/null
+++ b/packages/vue-component-library/src/lib-components/ButtonSubmit.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/packages/vue-component-library/src/stories/ButtonSubmit.spec.js b/packages/vue-component-library/src/stories/ButtonSubmit.spec.js
new file mode 100644
index 000000000..6020f3f39
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ButtonSubmit.spec.js
@@ -0,0 +1,8 @@
+describe('Funkhaus / Button Submit', () => {
+ it('Default', () => {
+ cy.visit('/iframe.html?id=funkhaus-button-submit--default&args=&viewMode=story')
+ cy.get('.button-submit').should('exist')
+
+ cy.percySnapshot('Funkhaus / Button Submit')
+ })
+})
diff --git a/packages/vue-component-library/src/stories/ButtonSubmit.stories.js b/packages/vue-component-library/src/stories/ButtonSubmit.stories.js
new file mode 100644
index 000000000..5f017161a
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ButtonSubmit.stories.js
@@ -0,0 +1,61 @@
+import SvgIconEye from 'ucla-library-design-tokens/assets/svgs/icon-eye.svg'
+import { computed } from 'vue'
+import ButtonSubmit from '@/lib-components/ButtonSubmit'
+
+export default {
+ title: 'Funkhaus / Button Submit',
+ component: ButtonSubmit,
+}
+
+const methods = {
+ onSubmit() {
+ alert('Button clicked!')
+ },
+}
+
+// Variations of stories below
+export function Default() {
+ return {
+ components: { ButtonSubmit },
+ provide() {
+ return {
+ theme: computed(() => 'dlc'),
+ }
+ },
+ methods,
+ template: '',
+ }
+}
+
+export function WithCustomIcon() {
+ return {
+ components: { ButtonSubmit },
+ provide() {
+ return {
+ theme: computed(() => 'dlc'),
+ }
+ },
+ data() {
+ return {
+ customIcon: SvgIconEye,
+ }
+ },
+ methods,
+ template: `
+
+
+
+
+
+ `,
+ }
+}
+
+// Variant: No theme provided (falls back to base styles)
+export function NoThemeProvided() {
+ return {
+ components: { ButtonSubmit },
+ methods,
+ template: '',
+ }
+}
diff --git a/packages/vue-component-library/src/styles/dlc/_button-submit.scss b/packages/vue-component-library/src/styles/dlc/_button-submit.scss
new file mode 100644
index 000000000..6d6c0c7ca
--- /dev/null
+++ b/packages/vue-component-library/src/styles/dlc/_button-submit.scss
@@ -0,0 +1,38 @@
+.button-submit,
+.dlc.button-submit {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: 74px;
+ width: 74px;
+ padding: 0;
+ background-color: var(--color-primary-blue-01);
+
+ // Target SVG elements
+ :deep(svg path) {
+ fill: var(--color-primary-blue-04);
+ transition: fill 0.3s ease-in-out;
+ }
+
+ // Hovers
+ @media #{$has-hover} {
+ &:hover {
+ :deep(svg path) {
+ fill: var(--color-default-cyan-03);
+ }
+ }
+ }
+ // Breakpoints
+ @media #{$medium} {
+ height: 53px;
+ }
+ @media #{$small} {
+ height: 60px;
+
+ // Target SVG elements
+ :deep(svg path) {
+ fill: var(--color-default-cyan-03);
+ }
+ }
+}