Modal

Info

Warning + action avec loader + maxWidth="lg"

Alerte + action primaire destructrice + une action secondaire avec couleur + une action custom + actions désactivables

Fullscreen

Example Usage (Modal 1)

<Modal isOpen={isOpen} onClose={onClose} variant="info">
  <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.Title>Modal 2</Modal.Title>
  <Modal.Content>
    <>
      Une modale avec :
      <ul>
        <li>un icône warning,</li>
        <li>du contenu,</li>
        <li>une action principale avec loader,</li>
        <li>une action secondaire avec la couleur primaire,</li>
        <li>une taille large</li>
      </ul>
    </>
  </Modal.Content>
  <Modal.PrimaryAction onClick={handleDelete}>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' | 'alert'	No	-	Defines the modal variant: adds corresponding icon in title and changes primary action button color to 'error' when variant="alert". No icon displayed if no variant provided.
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	Yes	-	The modal's content, which should include the following components:
		Yes		- <Modal.Title>: Title of the modal (required)
		No		- <Modal.Content>: Content of the modal
		No		- <Modal.PrimaryAction>: Primary action of the modal
		No		- <Modal.SecondaryAction>: Primary action of the modal
		No		- <Modal.CustomAction>: Custom action of the modal

Modal.PrimaryAction Props

Name	Type	Required	Default	Description
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