Skip to content

Commit 1f559e7

Browse files
committed
Update modal documentation
1 parent 8034069 commit 1f559e7

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

stories/Modal.stories.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,40 @@ useIsModalOpen(
6060
}
6161
);
6262
\`\`\`
63+
64+
You can have custom buttons to your modal, here is an example:
65+
66+
\`\`\`tsx
67+
function MyModalWithCustomButton() {
68+
return (
69+
<modal.Component
70+
title="My modal"
71+
// This is an array of <button /> props objects with one additional property: doClosesModal
72+
buttons={[
73+
{
74+
doClosesModal: true,
75+
children: "Cancel",
76+
},
77+
{
78+
doClosesModal: false,
79+
children: "Ok",
80+
onClick: async () => {
81+
82+
// Do something async
83+
84+
modal.close();
85+
86+
}
87+
}
88+
]}
89+
>
90+
My form
91+
</modal.Component>
92+
);
93+
}
94+
\`\`\`
95+
96+
6397
6498
To create a Dialog component, something that you would use to ask the user a question, like "Do you want to proceed?", you can implement this pattern:
6599
- [Component](https://github.com/codegouvfr/react-dsfr/blob/main/test/integration/cra/src/MyDialog.tsx),

0 commit comments

Comments
 (0)