Skip to main content

ConsentDialog

Storybook​

Go to Story

ConsentDialogContext​

const ConsentDialogContext: Context<ConsentDialogContextValue | null>;

Defined in: src/molecules/ConsentDialog/ConsentDialogContext.tsx:22

ConsentDialog()​

function ConsentDialog(__namedParameters): Element;

Defined in: src/molecules/ConsentDialog/ConsentDialog.tsx:53

A dialog component that requires explicit consent before proceeding. The dialog cannot be closed until the consent checkbox is checked.

Create your own component out of primitive components.

If you're creating app-wise consent, Render it at the root of your router to ensure the user has provided consent.

Parameters​

ParameterType
__namedParametersConsentDialogProps

Returns​

Element

Example​

<ConsentDialog open={userDidntAgreeToTermsAndConditionsYet}>
  <DialogHeader>
    <DialogTitle>Terms and Conditions</DialogTitle>
    <DialogDescription>Please read and accept the terms</DialogDescription>
  </DialogHeader>
  <ConsentDialogContent>
    <p>Terms content...</p>
  </ConsentDialogContent>
  <ConsentDialogCheckbox label="I agree to the terms" />
  <ConsentDialogSubmit onClick={handleAcceptConsent}>Accept</ConsentDialogSubmit>
</ConsentDialog>

ConsentDialogContent()​

function ConsentDialogContent(__namedParameters): Element;

Defined in: src/molecules/ConsentDialog/ConsentDialog.tsx:81

A scrollable container for dialog content. Useful for displaying long text like terms and conditions.

Parameters​

ParameterType
__namedParametersConsentDialogContentProps

Returns​

Element

Example​

<ConsentDialogContent>
  <p>Long terms and conditions text...</p>
</ConsentDialogContent>

ConsentDialogCheckbox()​

function ConsentDialogCheckbox(__namedParameters): Element;

Defined in: src/molecules/ConsentDialog/ConsentDialog.tsx:109

A checkbox component that controls the consent state.

Parameters​

ParameterType
__namedParametersConsentDialogCheckboxProps

Returns​

Element

Example​

<ConsentDialogCheckbox label="I agree to the terms and conditions" />

ConsentDialogSubmit()​

function ConsentDialogSubmit(__namedParameters): Element;

Defined in: src/molecules/ConsentDialog/ConsentDialog.tsx:138

A submit button that is disabled until consent is given.

Parameters​

ParameterType
__namedParametersConsentDialogSubmitProps

Returns​

Element

Example​

<ConsentDialogSubmit onClick={handleSubmit}>Accept Terms</ConsentDialogSubmit>

useConsentDialog()​

function useConsentDialog(): ConsentDialogContextValue;

Defined in: src/molecules/ConsentDialog/ConsentDialogContext.tsx:30

Hook to access the ConsentDialog context.

Returns​

ConsentDialogContextValue

Throws​

If used outside of a ConsentDialog component