diff --git a/src/components/ButtonIcon/ButtonIcon.mdx b/src/components/ButtonIcon/ButtonIcon.mdx
new file mode 100644
index 000000000..b9f006991
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.mdx
@@ -0,0 +1,19 @@
+import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks';
+
+import * as ButtonIconStories from './ButtonIcon.stories.js';
+
+
+
+# ButtonIcon
+
+## Usage
+
+Use the ButtonIcon component to create a button that displays only an icon, without any visible text.
+
+## Accessibility
+
+Since the button has no visible text, use a descriptive aria-label to ensure it's accessible to screen reader users.
+
+
+
+
diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
new file mode 100644
index 000000000..0c664b3a8
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -0,0 +1,35 @@
+import ButtonIcon from './ButtonIcon.vue';
+export default {
+ title: 'Components/ButtonIcon',
+ component: ButtonIcon,
+ render: (args) => ({
+ components: {ButtonIcon},
+ setup() {
+ return {args};
+ },
+ template: '',
+ }),
+};
+
+export const Default = {
+ args: {
+ icon: 'Add',
+ ariaLabel: 'Add more items',
+ },
+};
+
+export const Disabled = {
+ args: {
+ icon: 'Cancel',
+ ariaLabel: 'Cancel',
+ isDisabled: true,
+ },
+};
+
+export const Active = {
+ args: {
+ icon: 'Complete',
+ ariaLabel: 'Complete',
+ isActive: true,
+ },
+};
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
new file mode 100644
index 000000000..ad1032ee8
--- /dev/null
+++ b/src/components/ButtonIcon/ButtonIcon.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
diff --git a/src/components/DropdownActions/DropdownActions.stories.js b/src/components/DropdownActions/DropdownActions.stories.js
index 197042e17..85abcd785 100644
--- a/src/components/DropdownActions/DropdownActions.stories.js
+++ b/src/components/DropdownActions/DropdownActions.stories.js
@@ -146,7 +146,7 @@ export const EllipsisMenu = {
const canvas = within(canvasElement);
const user = userEvent.setup();
- await user.click(canvas.getByText('User management options'));
+ await user.click(canvas.getByLabelText('User management options'));
},
};
diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue
index f1dbba826..923fccb0a 100644
--- a/src/components/DropdownActions/DropdownActions.vue
+++ b/src/components/DropdownActions/DropdownActions.vue
@@ -3,20 +3,26 @@