How do you work with the buttons in a modal?

[lwhite1]

I have a modal with a form and 'create' and 'cancel' buttons (see below). I set the button titles (based on example code I found) by setting the primary and secondary button text.

My issue is that I can't see how to get access to the buttons themselves (esp. the primary button) in order to:

• disable it by default.
• enable it when the required fields are set
• handle the click event so i can package up my object and return it to the parent using a callback.

I've googled but can only find one example (and that uses a modal wrapper, which i believe works differently). The official documentation only shows how to render one modal, with no discussion of behavior.

In general, i think this is a beautiful design system with awesome components, but the more advanced behaviors seem to have little or no documentation. If I'm missing them, i would greatly appreciate pointers; If not, I hope you'll find the resources for more documentation in the future.

thank you

    return (
        <Modal
            modalHeading="New Project"
            open={showModal}
            primaryButtonText={"Create"}
            secondaryButtonText={"Cancel"}
            onRequestClose={() => setShowModal(false)}
        >
            <Form>
                <Stack gap={7}>
                    <TextInput data-modal-primary-focus id="titleInput" onChange={(e) => setTitle(e.target.value)} labelText="Title (required)" value={title} />
                    <TextArea id="descriptionInput" onChange={(e) => setDescription(e.target.value)} labelText="Description" rows={3} cols={40} value={description}/>
                </Stack>
            </Form>
        </Modal>
    );

[tay1orjones]

Hi @lwhite1, I think the props you're looking for are outlined in the component documentation on storybook. It shows all available options in the Component API table for the components and sheds some light on how to configure/use it within different scenarios.

• For disabling or enabling the primary button, the primaryButtonDisabled boolean can be set.
• For handling the click event to package up the object and return it to the parent, the onRequestSubmit prop can be used.

I definitely hear your feedback on needing to improve the documentation. One thing we're working on right now is to make storybook controls more useful within Playground stories #10751. Ideally this will make it easier to discover that these props exist and demonstrate how they impact the component visually or behaviorally.