Modal

Simple

Icône warning + action destructrice avec loader + maxWidth="lg"

Actions désactivables + une action secondaire avec couleur + une action custom

Fullscreen

Example Usage (Modal 1)

<Modal isOpen={isOpen} onClose={onClose}>
  <Modal.Title>Modal 1</Modal.Title>
  <Modal.Content>
    <>
      Une modale avec :
      <ul>
        <li>un titre,</li>
        <li>du contenu,</li>
        <li>une action secondaire,</li>
        <li>une action principale</li>
      </ul>
    </>
  </Modal.Content>
  <Modal.PrimaryAction onClick={validate}>Valider</Modal.PrimaryAction>
  <Modal.SecondaryAction onClick={onClose}>Annuler</Modal.SecondaryAction>
</Modal>

Example Usage (Modal 2)

<Modal isOpen={isOpen} onClose={onClose} variant="warning" maxWidth="lg">
  <Modal.Content>
    <>
      Une modale avec :
      <ul>
        <li>un icône warning,</li>
        <li>du contenu,</li>
        <li>une action principale destructrice avec loader,</li>
        <li>une action secondaire avec la couleur primaire,</li>
        <li>une taille large</li>
      </ul>
    </>
  </Modal.Content>
  <Modal.PrimaryAction onClick={handleDelete} isDangerous>
    Supprimer
  </Modal.PrimaryAction>
  <Modal.SecondaryAction onClick={onClose} color="primary">
    Annuler
  </Modal.SecondaryAction>
</Modal>

Modal Props

Name	Type	Required	Default	Description
isOpen	bool	Yes	-	Determines whether the modal is open or closed.
onClose	function	Yes	-	Callback function triggered when the modal is closed.
isCloseIconShown	bool	no	true	Display close icon
variant	'info' | 'warning' | 'error'	no	-	Display an icon according to the provided variant
fullWidth	bool	no	true	If true, the dialog stretches to maxWidth. Notice that the dialog width grow is limited by the default margin.
fullScreen	bool	no	false	If true, the dialog stretches fullscreen
maxWidth	'xs' | 'sm' | 'md' | 'lg' | 'xl'	no	'sm'	Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.
children	React nodes	No	-	The modal's content, which should include the following components:
				- <Modal.Title>: Title of the modal
				- <Modal.Content>: Content of the modal
				- <Modal.PrimaryAction>: Primary action of the modal
				- <Modal.SecondaryAction>: Primary action of the modal
				- <Modal.CustomAction>: Custom action of the modal

Modal.PrimaryAction Props

Name	Type	Required	Default	Description
isDangerous	bool	no	false	Display the primary action with danger color if true
disabled	bool	no	false	Set button action disable state
onClick	function	Yes	-	Callback function triggered when the action button is clicked
children	React node	No	-	Action label

Modal.SecondaryAction Props

Name	Type	Required	Default	Description
color	MUI Theme color	no	'secondaryAction'	Display the secondary action according to the provided color
disabled	bool	no	false	Set button action disable state
onClick	function	Yes	-	Callback function triggered when the action button is clicked
children	React node	No	-	Action label