diff --git a/docs/api/DialogComponent.md b/docs/api/DialogComponent.md
index f9e0a83..627509c 100644
--- a/docs/api/DialogComponent.md
+++ b/docs/api/DialogComponent.md
@@ -53,6 +53,26 @@ Component that shows the dialog.
- type: string
- default value: ''
+`confirmButtonLabel`: Label for the confirm button
+
+- type: string
+- default value: 'Yes'
+
+`cancelButtonLabel`: Label for the cancel button
+
+- type: string
+- default value: 'Yes'
+
+`disableConfirmButton`: When true, hides the confirm button
+
+- type: bool
+- default value: false
+
+`confirmButtonLabel`: When true, hides the cancel button
+
+- type: bool
+- default value: false
+
### Example usage
```tsx
diff --git a/src/dialog/DialogComponent.tsx b/src/dialog/DialogComponent.tsx
index ce544cb..3aaf9bb 100644
--- a/src/dialog/DialogComponent.tsx
+++ b/src/dialog/DialogComponent.tsx
@@ -15,6 +15,10 @@ interface DialogComponentProps {
cardActionsClassName?: string;
confirmButtonClassName?: string;
cancelButtonClassName?: string;
+ confirmButtonLabel?: string;
+ cancelButtonLabel?: string;
+ disableConfirmButton?: boolean;
+ disableCancelButton?: boolean;
}
export function DialogComponent({
@@ -27,6 +31,10 @@ export function DialogComponent({
cardActionsClassName,
confirmButtonClassName,
cancelButtonClassName,
+ confirmButtonLabel = 'Yes',
+ cancelButtonLabel = 'No',
+ disableConfirmButton = false,
+ disableCancelButton = false,
}: DialogComponentProps) {
const { onConfirm, onCancel, state } = useDialog();
@@ -92,24 +100,28 @@ export function DialogComponent({
-
-
+ {!disableConfirmButton && (
+
+ )}
+ {!disableCancelButton && (
+
+ )}
diff --git a/tests/DialogComponentProps.test.tsx b/tests/DialogComponentProps.test.tsx
index ad7929a..8f57609 100644
--- a/tests/DialogComponentProps.test.tsx
+++ b/tests/DialogComponentProps.test.tsx
@@ -154,4 +154,106 @@ describe('DialogComponent Props', () => {
expect(dialog.querySelector('.custom-cancel-button')).not.toBeNull();
});
});
+
+ describe("Prop confirmButtonLabel={'Confirm'}", () => {
+ beforeEach(async () => {
+ const portalElement = document.createElement('div');
+ portalElement.setAttribute('id', 'dialog');
+ portalElement.setAttribute('data-testid', 'dialog');
+
+ render(
+
+
+
+ ,
+ {
+ container: document.body.appendChild(portalElement),
+ },
+ );
+
+ await userEvent.click(screen.getByText('Open dialog'));
+ });
+
+ it('should display the confirm button with correct label', () => {
+ const dialog = screen.getByTestId('dialog');
+ expect(dialog.querySelector('.dialog__success')).toBeDefined();
+ expect(dialog.querySelector('.dialog__success')?.innerHTML).toEqual('Confirm');
+ });
+ });
+
+ describe("Prop cancelButtonLabel={'Cancel'}", () => {
+ beforeEach(async () => {
+ const portalElement = document.createElement('div');
+ portalElement.setAttribute('id', 'dialog');
+ portalElement.setAttribute('data-testid', 'dialog');
+
+ render(
+
+
+
+ ,
+ {
+ container: document.body.appendChild(portalElement),
+ },
+ );
+
+ await userEvent.click(screen.getByText('Open dialog'));
+ });
+
+ it('should display the cancel button with correct label', () => {
+ const dialog = screen.getByTestId('dialog');
+ expect(dialog.querySelector('.dialog__error')).toBeDefined();
+ expect(dialog.querySelector('.dialog__error')?.innerHTML).toEqual('Cancel');
+ });
+ });
+
+ describe('Prop disableConfirmButton={true}', () => {
+ beforeEach(async () => {
+ const portalElement = document.createElement('div');
+ portalElement.setAttribute('id', 'dialog');
+ portalElement.setAttribute('data-testid', 'dialog');
+
+ render(
+
+
+
+ ,
+ {
+ container: document.body.appendChild(portalElement),
+ },
+ );
+
+ await userEvent.click(screen.getByText('Open dialog'));
+ });
+
+ it('should not display the confirm button', () => {
+ const dialog = screen.getByTestId('dialog');
+ expect(dialog.querySelector('.dialog__success')).toBeNull();
+ });
+ });
+
+ describe('Prop disableCancelButton={true}', () => {
+ beforeEach(async () => {
+ const portalElement = document.createElement('div');
+ portalElement.setAttribute('id', 'dialog');
+ portalElement.setAttribute('data-testid', 'dialog');
+
+ render(
+
+
+
+ ,
+ {
+ container: document.body.appendChild(portalElement),
+ },
+ );
+
+ await userEvent.click(screen.getByText('Open dialog'));
+ });
+
+ it('should not display the confirm button', () => {
+ const dialog = screen.getByTestId('dialog');
+ expect(dialog.querySelector('.dialog__error')).toBeNull();
+ });
+ });
});