Modal

This is the <Modal /> component

Basic Modal

Presentation

Color scheme:

DarkLight

Hide close button

Source

<Modal onClose={() => setShowModal(false)} width="500px">
  <ModalBackgroundContent
    background={
      <MediaAsset
        assetSrc="video-asset-url.webm"
        loop
        imageType="square"
        type={MediaAssetTypes.video}
        />
    }
    textAlign="center"
  >
    <Box direction="column" justify="space-between" align="center">
      <img
      src="logo-asset-url.png"
      width="200px"
      />
      <Text paragraph appearance="h3">
        Lorem ipsum
      </Text>
    </Box>
  </ModalBackgroundContent>
  <ModalTitle>Lorem ipsum</ModalTitle>
  <ModalContentText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et ...</ModalContentText>
  <ModalActions direction="row">
    <Button>Cancel</Button>
    <Button>Modal Action</Button>
  </ModalActions>
</Modal>

Component API

Name	Type	Default	Description
colorScheme	dark / light	dark	Modal color scheme
children	ReactNode	-	Modal content
className	string	-	Used to pass className down to the Modal for a better styling
onClose	() => void	-	Close event, used by the modal elements (backdrop, close button)
hideCloseButton	boolean	-	Toggle prop to hide close button of the modal.