diff --git a/.changeset/popular-trees-hunt.md b/.changeset/popular-trees-hunt.md
new file mode 100644
index 0000000000000..2adaa5ce5df00
--- /dev/null
+++ b/.changeset/popular-trees-hunt.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/ui-client": patch
+---
+
+Adds an annotation prop to the WizardActions component, enabling the display of a contextual description alongside the action buttons.
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx
new file mode 100644
index 0000000000000..ec0735482bda7
--- /dev/null
+++ b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx
@@ -0,0 +1,19 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './WizardActions.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+ const tree = render();
+ expect(tree.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+ const { container } = render();
+
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+});
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
new file mode 100644
index 0000000000000..b52b5c2e28d57
--- /dev/null
+++ b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
@@ -0,0 +1,49 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { Meta, StoryFn } from '@storybook/react';
+import { ComponentProps } from 'react';
+
+import Wizard from './Wizard';
+import WizardActions from './WizardActions';
+import WizardBackButton from './WizardBackButton';
+import WizardNextButton from './WizardNextButton';
+import { useWizard } from './useWizard';
+
+export default {
+ title: 'Components/Wizard/WizardActions',
+ component: WizardActions,
+ decorators: (Story) => {
+ const wizardApi = useWizard({
+ steps: [
+ { id: 'first-step', title: 'First step' },
+ { id: 'second-step', title: 'Second step' },
+ { id: 'third-step', title: 'Third step' },
+ ],
+ });
+
+ return (
+
+
+
+
+
+ );
+ },
+ parameters: {
+ layout: 'centered',
+ },
+} satisfies Meta;
+
+const Template: StoryFn> = (args) => (
+
+
+
+
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithAnnotation = Template.bind({});
+WithAnnotation.args = {
+ annotation: 'This is a sample annotation',
+};
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.tsx b/packages/ui-client/src/components/Wizard/WizardActions.tsx
index 29d5928e9551f..8a891cbbc874f 100644
--- a/packages/ui-client/src/components/Wizard/WizardActions.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardActions.tsx
@@ -2,11 +2,18 @@ import { Box, ButtonGroup } from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';
type WizardActionsProps = {
+ annotation?: string;
children: ReactNode;
};
-const WizardActions = ({ children }: WizardActionsProps) => (
-
+const WizardActions = ({ annotation, children }: WizardActionsProps) => (
+
+ {annotation ? (
+
+ {annotation}
+
+ ) : null}
+
{children}
);
diff --git a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
index 98e98ea793020..9ccdb31495766 100644
--- a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
+++ b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
@@ -64,7 +64,7 @@ exports[`renders BasicWizard without crashing 1`] = `
+`;
+
+exports[`renders WithAnnotation without crashing 1`] = `
+