@bdt-component-library/modal

Modal component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryModal from 'https://cdn.skypack.dev/@bdt-component-library/modal';
</script>

README

Modal Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of modals according to style guide conventions.

API

prop type required default explanation
children any yes n/a Renders the modal description
open boolean yes false Determines open state of modal
closeOnBackdropClick boolean no true Determines if the modal closes on clicking outside the modal
title string no undefined Modal title
width number no undefined Determines modal width
close function yes () => {} Handler for the onclick event on close button
hasBodyScroll boolean no false Determines wether scroll behavior occurs in the body section with a max height on the whole modal, or on the whole modal container (default)
cta React node no no Optional "call to action"
zIndex number no 1000 Determines z-index style for the modal (as well as backdrop at zIndex - 1)