diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx
index 7bec44f170..3b72d93e12 100644
--- a/packages/components/src/components/modal/modal.tsx
+++ b/packages/components/src/components/modal/modal.tsx
@@ -60,6 +60,8 @@ export class Modal {
   @Prop() duration?: number = 200;
   /** (optional) Label for close button */
   @Prop() closeButtonLabel?: string = 'Close Pop-up';
+  /** (optional) title for close button */
+  @Prop() closeButtonTitle?: string = 'Close';
   /** (optional) Alignment of action buttons */
   @Prop() alignActions?: 'right' | 'left' = 'right';
   /** (optional) Injected CSS styles */
@@ -267,6 +269,7 @@ export class Modal {
                 part="close-button"
                 onClick={() => this.emitBeforeClose('CLOSE_BUTTON')}
                 aria-label={this.closeButtonLabel}
+                title={this.closeButtonTitle}
               >
                 <slot name="close-icon">
                   <scale-icon-action-circle-close decorative />
diff --git a/packages/components/src/components/modal/readme.md b/packages/components/src/components/modal/readme.md
index ecf67671e5..d1039eaa36 100644
--- a/packages/components/src/components/modal/readme.md
+++ b/packages/components/src/components/modal/readme.md
@@ -11,6 +11,7 @@
 | ------------------ | -------------------- | ---------------------------------------- | ------------------- | ---------------- |
 | `alignActions`     | `align-actions`      | (optional) Alignment of action buttons   | `"left" \| "right"` | `'right'`        |
 | `closeButtonLabel` | `close-button-label` | (optional) Label for close button        | `string`            | `'Close Pop-up'` |
+| `closeButtonTitle` | `close-button-title` | (optional) title for close button        | `string`            | `'Close'`        |
 | `customClass`      | `custom-class`       | (optional) Custom class                  | `string`            | `''`             |
 | `duration`         | `duration`           | (optional) Transition duration           | `number`            | `200`            |
 | `heading`          | `heading`            | Modal heading                            | `string`            | `undefined`      |
diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
index 8e19f4b3dc..6307985cb5 100644
--- a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
+++ b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
@@ -74,6 +74,7 @@ export const Template = (args, context) => ({
         :opened="isOpen"
         :duration="duration"
         :close-button-label="closeButtonLabel"
+        :close-button-title="closeButtonTitle"
         :align-actions="alignActions"
         :styles="styles"
         @scaleClose="scaleClose()"
diff --git a/packages/storybook-vue/stories/components/modal/ScaleModal.vue b/packages/storybook-vue/stories/components/modal/ScaleModal.vue
index 8c17e274e9..33af8d8267 100644
--- a/packages/storybook-vue/stories/components/modal/ScaleModal.vue
+++ b/packages/storybook-vue/stories/components/modal/ScaleModal.vue
@@ -7,6 +7,7 @@
     :opened="opened"
     :duration="duration"
     :close-button-label="closeButtonLabel"
+    :close-button-title="closeButtonTitle"
     :align-actions="alignActions"
     :styles="styles"
     @scaleClose="scaleClose"
@@ -20,7 +21,7 @@
 </template>
 
 <script>
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 const scaleCloseAction = action('scaleClose');
 
@@ -33,34 +34,35 @@ export default {
     opened: Boolean,
     duration: { type: Number, default: 200 },
     closeButtonLabel: String,
+    closeButtonTitle: String,
     alignActions: { type: String, default: 'right' },
     styles: { type: String },
   },
   methods: {
     scaleOpen($event) {
-      action("scaleOpen");
-      this.$emit("scaleOpen", $event);
+      action('scaleOpen');
+      this.$emit('scaleOpen', $event);
     },
     'scale-open'($event) {
-      action("scale-open");
-      this.$emit("scale-open", $event);
+      action('scale-open');
+      this.$emit('scale-open', $event);
     },
     scaleBeforeClose($event) {
-      action("scaleBeforeClose");
-      this.$emit("scaleBeforeClose", $event);
+      action('scaleBeforeClose');
+      this.$emit('scaleBeforeClose', $event);
     },
     'scale-before-close'($event) {
-      action("scale-before-close");
-      this.$emit("scale-before-close", $event);
+      action('scale-before-close');
+      this.$emit('scale-before-close', $event);
     },
     scaleClose($event) {
-      action("scaleClose");
-      this.$emit("scaleClose", $event);
+      action('scaleClose');
+      this.$emit('scaleClose', $event);
     },
     'scale-close'($event) {
-      action("scale-close");
-      this.$emit("scale-close", $event);
+      action('scale-close');
+      this.$emit('scale-close', $event);
     },
-  }
+  },
 };
 </script>