A modal refers to a content box that is displayed in combination with an overlay on a page. The Modal component should be used to present additional content without taking the user out of the current flow. If you can't answer the question "Why does this content need to be in a modal instead of within the page?", you should not use a modal.
npm install @nib-components/modal
import Modal from '@nib-components/modal';
|string||The title of the modal. This is rendered above the content on large, and within the content on small screens.|
|boolean||Whether the Modal is being displayed.|
|boolean||The Modal comes in both a light and dark theme. The default is the light theme.|
|boolean||Whether the Modal should close on user |
|boolean||Whether the Modal should close on user click of the Overlay.|
|function||Handle the close events.|
There are two "modes" or "themes" for our Modal component, light and dark. Our modal styling is light by default, using a dark overlay and a light content box. It is the preferred option in the majority of cases. Unless you have an explicit reason not to, it should be used for all modals.
Our dark modal has been designed specifically for use within our quote funnel and has not been adopted elsewhere. It uses a light overlay and a dark content box. Do not use this modal unless there is an explicit reason to do so.
For screens with widths over
640px the modal will be
620px wide. For screen sizes under
640px, the modal width is set at
90% of the parent width. Modal height is dictated by the content it contains to ensure adequate spacing and layout.
To trigger the opening of a modal you should use a single line Link or a Button. Following those guidelines, be sure to tell the user what the content of the modal is prior to them opening it, and use clear and concise language (e.g. "What I'm covered for in hospital"). Avoid contextless requests as labels (e.g. "Click here").
Never open modals by default
Modals should never be open by default on a page load. Modals should never be opened without direct and intentional action from the user.
To open the modal, fade the modal and overlay in. To give the modal more context, for example if it pertains to information about a left-hand navigation drawer, provide a slide and fade effect (e.g. fade it in and slide to the right to emphasise the connection between modal and navigation drawer). Be sure to position the modal entirely within the current viewport.
Our modal has a close icon in the top right be default, and should also include a close button at the bottom of the content for long modals with text such as either 'close', 'cancel', 'okay', or another descriptor. The modal should also close when the user clicks anywhere on the Overlay. All opening animations should be reversed on modal closure.
To avoid confusing the user, a modal should never link to a different page on closure.
When appropriate (see Sizing), content inside the modal should be scrollable. To increase usability for all screen sizes (particularly mobile), a 'back to top' button should be included on lengthy modals.
The page behind the modal should not be scrollable while it is open. This ensured the user doesn't becoming disoriented from the content they are engaged with.
To allow for those using screen readers or assistive technology, the following should be adhered to:
- Allow the modal to be closed with the
- Allow scrollable modal content to be accessed using the
- The close button should be auto-focused when the modal opens
- Focus should be trapped to the modal content when it is open allowing for "tabbable" navigation of elements within the modal
- Focus should return to the trigger element when the modal closes (this assists all users, not only those with accessibility needs)