diff --git a/packages/ui/src/components/va-button/VaButton.stories.ts b/packages/ui/src/components/va-button/VaButton.stories.ts
index 2149eea298..b06e0fd273 100644
--- a/packages/ui/src/components/va-button/VaButton.stories.ts
+++ b/packages/ui/src/components/va-button/VaButton.stories.ts
@@ -1,15 +1,469 @@
-import { defineComponent } from 'vue'
-import VaButton from './VaButton.vue'
-import VaButtonDemo from './VaButton.demo.vue'
+import { VaButton } from './'
+import { userEvent } from '../../../.storybook/interaction-utils/userEvent'
+import { within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
 
 export default {
   title: 'VaButton',
   component: VaButton,
+  tags: ['autodocs'],
 }
 
-export const Default = () => defineComponent({
-  components: { VaButton: VaButtonDemo },
-  template: '<VaButton/>',
+export const Default = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton>
+      Button
+    </VaButton>
+  `,
+})
+
+export const Color = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton color="warning">
+      Button
+    </VaButton>
+  `,
+})
+
+export const Gradient = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton gradient>
+      Button
+    </VaButton>
+  `,
+})
+
+export const BackgroundOpacity = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton :backgroundOpacity="0.25">
+      Button
+    </VaButton>
+  `,
+})
+
+export const TextColor = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton textColor="warning">
+      Button
+    </VaButton>
+  `,
+})
+
+export const TextOpacity = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton :textOpacity="0.75">
+      Button
+    </VaButton>
+  `,
+})
+
+export const BorderColor = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton borderColor="warning">
+      Button
+    </VaButton>
+  `,
+})
+
+export const Disabled = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton disabled>
+      Button
+    </VaButton>
+  `,
+})
+
+export const Plain = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton plain>
+      Button
+    </VaButton>
+  `,
+})
+
+export const Round = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton round>
+      Button
+    </VaButton>
+    &nbsp;
+    <VaButton round icon="warning"/>
+  `,
+})
+
+export const Block = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton block>
+      Button
+    </VaButton>
+  `,
+})
+
+export const Icon = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton icon="va-warning">
+      Button
+    </VaButton>
+  `,
+})
+
+export const IconRight = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton iconRight="va-warning">
+      Button
+    </VaButton>
+  `,
+})
+export const IconOnly = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton iconRight="va-warning"/>
+  `,
+})
+
+export const IconColor = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton
+      icon="va-warning"
+      iconColor="warning"
+    >
+      Button
+    </VaButton>
+  `,
+})
+
+export const Loading = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton loading>
+      Button
+    </VaButton>
+  `,
+})
+
+export const Size = () => ({
+  components: { VaButton },
+  template: `
+    [small]
+    <div style="display: flex">
+      <VaButton size="small">
+        Button
+      </VaButton>&nbsp;
+      <VaButton size="small" icon="va-warning"/>&nbsp;
+      <VaButton size="small" icon="va-warning" iconRight="va-warning">
+        Button
+      </VaButton>
+    </div>
+    [medium]
+    <div style="display: flex">
+      <VaButton size="medium">
+        Button
+      </VaButton>&nbsp;
+      <VaButton size="medium" icon="va-warning"/>&nbsp;
+      <VaButton size="medium" icon="va-warning" iconRight="va-warning">
+        Button
+      </VaButton>
+    </div>
+    [large]
+    <div style="display: flex">
+      <VaButton size="large">
+        Button
+      </VaButton>&nbsp;
+      <VaButton size="large" icon="va-warning"/>&nbsp;
+      <VaButton size="large" icon="va-warning" iconRight="va-warning">
+        Button
+      </VaButton>
+    </div>
+  `,
+})
+
+export const MultilineText = () => ({
+  components: { VaButton },
+  template: `
+    <p>[default]</p>
+    <VaButton style="width: 150px;">
+      Default Button with long text
+    </VaButton>
+    <p>[small]</p>
+    <VaButton size="small" style="width: 150px;">
+      Small Button with long text
+    </VaButton>
+    <p>[medium]</p>
+    <VaButton size="medium" style="width: 150px;">
+      Medium Button with long text
+    </VaButton>
+    <p>[large]</p>
+    <VaButton size="large" style="width: 150px;">
+      Large Button with long text
+    </VaButton>
+  `,
+})
+
+export const Preset = () => ({
+  components: { VaButton },
+  template: `
+    <p>[default]</p>
+    <VaButton preset="default">
+      Button
+    </VaButton>
+    <p>[primary]</p>
+    <VaButton preset="primary">
+      Button
+    </VaButton>
+    <p>[secondary]</p>
+    <VaButton preset="secondary">
+      Button
+    </VaButton>
+    <p>[plain]</p>
+    <VaButton preset="plain">
+      Button
+    </VaButton>
+    <p>[plainOpacity]</p>
+    <VaButton preset="plainOpacity">
+      Button
+    </VaButton>
+  `,
+})
+
+export const HoverBehavior = () => ({
+  components: { VaButton },
+  template: `
+    <p>[mask]</p>
+    <VaButton hoverBehavior="mask">
+      Button
+    </VaButton>
+
+    <p>[opacity]</p>
+    <VaButton hoverBehavior="opacity">
+      Button
+    </VaButton>
+  `,
+})
+
+export const HoverMaskColor = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton hoverMaskColor="danger">
+      Button
+    </VaButton>
+  `,
+})
+
+export const HoverOpacity = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton
+      hoverBehavior="opacity"
+      :hoverOpacity="0"
+    >
+      Button
+    </VaButton>
+  `,
+})
+
+export const PressedBehavior = () => ({
+  components: { VaButton },
+  template: `
+    <p>[mask]</p>
+    <VaButton pressedBehavior="mask">
+      Button
+    </VaButton>
+    <p>[opacity]</p>
+    <VaButton pressedBehavior="opacity">
+      Button
+    </VaButton>
+  `,
+})
+
+export const PressedMaskColor = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton pressedMaskColor="danger">
+      Button
+    </VaButton>
+  `,
+})
+
+export const PressedOpacity = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton
+      pressedBehavior="opacity"
+      :pressedOpacity="0"
+    >
+      Button
+    </VaButton>
+  `,
+})
+
+export const Href = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton href="https://ui.vuestic.dev/">
+      Button
+    </VaButton>
+  `,
+})
+
+export const SizesConfig = () => ({
+  components: { VaButton },
+  data: () => ({
+    sizesConfig: { defaultSize: 24, sizes: { small: 16, medium: 24, large: 32 } },
+  }),
+  template: `
+    <p>[default: 24px]</p>
+    <VaButton
+      :sizesConfig="sizesConfig"
+    >
+      Button
+    </VaButton>
+    <p>[small: 16px]</p>
+    <VaButton
+      :sizesConfig="sizesConfig"
+      size="small"
+    >
+      Button
+    </VaButton>
+    <p>[medium: 24px]</p>
+    <VaButton
+      :sizesConfig="sizesConfig"
+      size="medium"
+    >
+      Button
+    </VaButton>
+    <p>[large: 32px]</p>
+    <VaButton
+      :sizesConfig="sizesConfig"
+      size="large"
+    >
+      Button
+    </VaButton>
+  `,
+})
+
+export const FontSizesConfig = () => ({
+  components: { VaButton },
+  data: () => ({
+    fontSizeConfig: { defaultSize: 0.75, sizes: { small: 0.5, medium: 0.75, large: 1 } },
+  }),
+  template: `
+    <p>[default: 0.75rem]</p>
+    <VaButton
+      :fontSizesConfig="fontSizeConfig"
+    >
+      Button
+    </VaButton>
+    <p>[small: 0.5rem]</p>
+    <VaButton
+      :fontSizesConfig="fontSizeConfig"
+      size="small"
+    >
+      Button
+    </VaButton>
+    <p>[medium: 0.75rem]</p>
+    <VaButton
+      :fontSizesConfig="fontSizeConfig"
+      size="medium"
+    >
+      Button
+    </VaButton>
+    <p>[large: 1rem]</p>
+    <VaButton
+      :fontSizesConfig="fontSizeConfig"
+      size="large"
+    >
+      Button
+    </VaButton>
+  `,
+})
+
+export const ClickEvent = () => ({
+  components: { VaButton },
+  data: () => ({ clicked: false }),
+  template: `
+    <VaButton @click="clicked = true">
+      Button
+    </VaButton>
+    <p>Clicked: <span data-testid="clicked">{{ clicked }}</span></p>
+  `,
+})
+
+ClickEvent.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement)
+  const clickState = canvas.getByTestId('clicked')
+
+  await step('True on click', async () => {
+    const button = document.querySelector('[type="button"]') as HTMLElement
+
+    expect(clickState.innerText).toEqual('false')
+    await userEvent.click(button)
+    expect(clickState.innerText).toEqual('true')
+  })
+}
+
+export const FocusAndBlurMethods = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton ref="button">
+      Main Button
+    </VaButton>&nbsp;
+    <VaButton @click="$refs.button.focus()">
+      Focus Button
+    </VaButton>&nbsp;
+    <VaButton @click="$refs.button.blur()">
+      Blur Button
+    </VaButton>
+  `,
+})
+
+export const AppendSlot = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton>
+      Button
+      <template #append>
+        [append]
+      </template>
+    </VaButton>
+  `,
+})
+
+export const PrependSlot = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton>
+      <template #prepend>
+        [prepend]
+      </template>
+      Button
+    </VaButton>
+  `,
+})
+
+export const LoadingSlot = () => ({
+  components: { VaButton },
+  template: `
+    <VaButton loading>
+      <template #loading>
+        [loading]
+      </template>
+      button
+    </VaButton>
+  `,
 })
 
 // See: https://github.com/epicmaxco/vuestic-ui/issues/2704
@@ -17,7 +471,7 @@ export const RightShift = () => ({
   components: { VaButton },
   template: `
     <div>
-      <VaButton>Text</VaButton>
+      <VaButton>Text</VaButton>&nbsp;
       <VaButton icon="phone">Text2</VaButton>
     </div>
   `,
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index 70f3d97e77..5b25591806 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -32,20 +32,23 @@
         />
       </slot>
     </span>
-    <template v-if="loading">
-      <slot name="loading" v-bind="{
-        size: loaderSizeComputed,
-        color: textColorComputed,
-      }">
-        <va-progress-circle
-          class="va-button__loader"
-          :size="loaderSizeComputed"
-          :color="textColorComputed"
-          :thickness="0.15"
-          indeterminate
-        />
-      </slot>
-      </template>
+    <template  v-if="loading">
+      <div class="va-button__loader">
+        <slot name="loading"
+          v-bind="{
+            size: loaderSizeComputed,
+            color: textColorComputed,
+          }"
+        >
+          <va-progress-circle
+            :size="loaderSizeComputed"
+            :color="textColorComputed"
+            :thickness="0.15"
+            indeterminate
+          />
+        </slot>
+      </div>
+    </template>
   </component>
 </template>
 
@@ -114,7 +117,7 @@ export default defineComponent({
     const colorComputed = computed(() => getColor(props.color))
 
     // loader size
-    const { sizeComputed } = useSize(props)
+    const { sizeComputed, fontSizeComputed } = useSize(props, 'VaButton')
     const loaderSizeComputed = computed(() => {
       const size = /([0-9]*)(px)/.exec(sizeComputed.value) as null | [string, string, string]
       return size ? `${+size[1] / 2}${size[2]}` : sizeComputed.value
@@ -178,6 +181,8 @@ export default defineComponent({
     return {
       button,
       tagComputed,
+      fontSizeComputed,
+      sizeComputed,
       computedClass,
       computedStyle,
       textColorComputed,
@@ -214,11 +219,14 @@ export default defineComponent({
   box-shadow: var(--va-button-box-shadow);
   font-family: var(--va-font-family);
   font-weight: var(--va-button-font-weight);
+  font-size: v-bind(fontSizeComputed);
   text-decoration: none;
   text-transform: initial;
   transition: var(--va-button-transition);
   box-sizing: border-box;
   cursor: var(--va-button-cursor);
+  min-width: v-bind(sizeComputed);
+  min-height: v-bind(sizeComputed);
   z-index: 0;
   vertical-align: top;
 
@@ -226,8 +234,8 @@ export default defineComponent({
   &::before {
     content: '';
     position: absolute;
-    width: 100%;
     height: 100%;
+    width: 100%;
     border-radius: inherit;
     left: 0;
     top: 0;
@@ -259,11 +267,8 @@ export default defineComponent({
     line-height: var(--va-button-sm-line-height);
     border-radius: var(--va-button-sm-border-radius);
     letter-spacing: var(--va-button-sm-letter-spacing);
-    min-height: var(--va-button-sm-size);
-    min-width: var(--va-button-sm-size);
 
     .va-button__content {
-      font-size: var(--va-button-sm-font-size);
       padding: var(--va-button-sm-content-py) var(--va-button-sm-content-px);
     }
 
@@ -307,13 +312,9 @@ export default defineComponent({
     line-height: var(--va-button-line-height);
     border-radius: var(--va-button-border-radius);
     letter-spacing: var(--va-button-letter-spacing);
-    min-height: var(--va-button-size);
-    min-width: var(--va-button-size);
 
     .va-button__content {
-      font-size: var(--va-button-font-size);
       padding: var(--va-button-content-py) var(--va-button-content-px);
-      line-height: var(--va-button-line-height);
     }
 
     // set icons the same size as text
@@ -356,11 +357,8 @@ export default defineComponent({
     line-height: var(--va-button-lg-line-height);
     border-radius: var(--va-button-lg-border-radius);
     letter-spacing: var(--va-button-lg-letter-spacing);
-    min-height: var(--va-button-lg-size);
-    min-width: var(--va-button-lg-size);
 
     .va-button__content {
-      font-size: var(--va-button-lg-font-size);
       padding: var(--va-button-lg-content-py) var(--va-button-lg-content-px);
     }
 
diff --git a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
index d3cd2f2608..5bc1391add 100644
--- a/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
+++ b/packages/ui/src/components/va-button/hooks/useButtonTextColor.ts
@@ -96,7 +96,7 @@ export const useButtonTextColor: UseButtonTextColor = (
 
   return computed(() => {
     const defaultColorStyles = {
-      color: textColorComputed.value,
+      color: textColorComputed.value === 'currentColor' ? 'currentColor' : colorToRgba(textColorComputed.value, getOpacity(props.textOpacity)),
       background: 'transparent',
     }
 
diff --git a/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts b/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
index a4b6860bd8..9675c5914f 100644
--- a/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
+++ b/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
@@ -4,7 +4,7 @@ import { VaButton } from '../va-button'
 export default {
   title: 'VaCheckbox',
   component: VaCheckbox,
-  tags:['autodocs'],
+  tags: ['autodocs'],
 }
 
 export const Default = () => ({
@@ -202,7 +202,7 @@ export const Success = () => ({
 
 export const ArrayValue = () => ({
   components: { VaCheckbox },
-  data: () => ({ value: [ 'One', 'Two' ] }),
+  data: () => ({ value: ['One', 'Two'] }),
   template: `
     <VaCheckbox 
       v-model="value"
@@ -225,7 +225,7 @@ export const ArrayValue = () => ({
 
 export const TrueValue = () => ({
   components: { VaCheckbox },
-  data: () => ({ value: "One" }),
+  data: () => ({ value: 'One' }),
   template: `
     <VaCheckbox 
       v-model="value" 
@@ -237,7 +237,7 @@ export const TrueValue = () => ({
 
 export const FalseValue = () => ({
   components: { VaCheckbox },
-  data: () => ({ value: "One" }),
+  data: () => ({ value: 'One' }),
   template: `
     <VaCheckbox 
       v-model="value" 
@@ -249,7 +249,7 @@ export const FalseValue = () => ({
 
 export const IndeterminateValue = () => ({
   components: { VaCheckbox },
-  data: () => ({ value: "One" }),
+  data: () => ({ value: 'One' }),
   template: `
     <VaCheckbox 
       v-model="value" 
@@ -258,4 +258,4 @@ export const IndeterminateValue = () => ({
     />
     {{ value }}
   `,
-})
\ No newline at end of file
+})
diff --git a/packages/ui/src/composables/useSize.ts b/packages/ui/src/composables/useSize.ts
index ac2d9eb8b8..8f5c908a42 100644
--- a/packages/ui/src/composables/useSize.ts
+++ b/packages/ui/src/composables/useSize.ts
@@ -1,23 +1,43 @@
 import { computed, getCurrentInstance, PropType } from 'vue'
 
-import { useGlobalConfig, SizeConfig } from '../services/global-config/global-config'
+import { useGlobalConfig, SizeConfig, SizesConfig } from '../services/global-config/global-config'
 import type { VuesticComponentName } from '../services/vue-plugin/types/components'
 
-export const sizesConfig: SizeConfig = {
-  defaultSize: 48,
-  sizes: {
-    small: 32,
-    medium: 48,
-    large: 64,
+export const sizesConfig: SizesConfig = {
+  default: {
+    defaultSize: 48,
+    sizes: {
+      small: 32,
+      medium: 48,
+      large: 64,
+    },
+  },
+  VaButton: {
+    defaultSize: 36,
+    sizes: {
+      small: 24,
+      medium: 36,
+      large: 48,
+    },
   },
 }
 
-export const fontSizesConfig: SizeConfig = {
-  defaultSize: 1,
-  sizes: {
-    small: 0.75,
-    medium: 1,
-    large: 1.25,
+export const fontSizesConfig: SizesConfig = {
+  default: {
+    defaultSize: 1,
+    sizes: {
+      small: 0.75,
+      medium: 1,
+      large: 1.25,
+    },
+  },
+  VaButton: {
+    defaultSize: 1,
+    sizes: {
+      small: 0.8125,
+      medium: 1,
+      large: 1.05,
+    },
   },
 }
 
@@ -44,12 +64,12 @@ export const useSizeProps = {
 
   sizesConfig: {
     type: Object as PropType<Record<string, any>>,
-    default: () => sizesConfig,
+    default: () => sizesConfig[getCurrentInstance()?.type.name!] ?? sizesConfig['default'],
   },
 
   fontSizesConfig: {
     type: Object as PropType<Record<string, any>>,
-    default: () => fontSizesConfig,
+    default: () => fontSizesConfig[getCurrentInstance()?.type.name!] ?? fontSizesConfig['default'],
   },
 }
 
diff --git a/packages/ui/src/services/global-config/types.ts b/packages/ui/src/services/global-config/types.ts
index ed6e974be8..a11d932b5b 100644
--- a/packages/ui/src/services/global-config/types.ts
+++ b/packages/ui/src/services/global-config/types.ts
@@ -28,6 +28,8 @@ export type SizeConfig = {
   sizes?: { [sizeName: string]: number | string },
 }
 
+export type SizesConfig = { [key: string]: SizeConfig }
+
 export type GlobalConfigUpdater<T> = (config: T) => T;
 export type {
   ColorConfig,