Skip to content

Modal

Status: Stable

Standard, accessible NerdWallet modal. Built on top of the 3rd party react-modal package     .

Variants

Basic

With Secure Encryption Message

With Back Button

With Call to Action

Accessibility

It's important for the modal to have a label. If you're using the Modal's title prop, it will automatically be used as the label.

If you use a custom title, you can use the aria prop to wire things up yourself:

<Modal
aria={{
labelledby: 'modal-title',
}}
>
<Title id="modal-title">My Modal Title</Title>
</Modal>

Development

The underlying react-modal library needs to know the root of your application so it can hide it via the aria-hidden attribute when the modal is open. This "app element" is automatically set to #main, so you shouldn't need to change this when working in normal React apps. However, if you're working in other contexts like Storybook, you may wish to change this app element:

import { Modal } from '@nerdwallet/currency';
Modal.setAppElement('#other-query-selector-here');

If you are writing component tests, you may need to have the tests run inside an HTML wrapper with id="main" set for the modal to render correctly in context.

See more info in the react-modal docs on app-element     .

Props

<Modal>

onRequestBack

Function

Run after the modal's back button is clicked.

shouldShowSecurityMessage

boolean

Flag to indicate if the encryption security message should be added to the modal.

shouldShowBack

boolean

Indicates if the back button should be shown.

titleElementId

string

unique id for the title's dom element. If not provided, an autogenerated id will be used.

title

string

The title text of the modal

subtitle

string

The subtitle text of the modal

aria

Object

Deprecated
Additional ARIA attributes. This could be extended for more support @deprecated
{
labelledby: string
}

closeTimeoutMS

number

Deprecated
Duration for modal visual animations @deprecated

contentLabel

string

Deprecated
How the content container should be announced to screen readers @deprecated

onAfterOpen

Function

Deprecated
Will be run after the modal has opened. @deprecated