• /
  • Log in

Modal

Modals are used for single-step create, add, edit, or delete actions. They are also used to display additional metadata about a screen or specific object on the screen.

Usage

import { Modal } from 'nr1'

Examples

Props

ariaLabelledBystring

Pass the string of the text content which should better describe the purpose of the modal to be correctly announced by screen readers.

childrennode

Content to render inside the modal.

classNamestring

Appends class names to the component.

hiddenboolean
DEFAULT
false

If true, the modal is hidden.

onCloserequiredfunction

Callback fired when clicking on the Modal's close button.

onHideEndfunction

Callback fired when the Modal finishes the closing animation.

Use this to unmount the Modal component. This ensures that the closing animation works properly.

onHideStartfunction

Callback fired when the Modal starts the closing animation.

onShowEndfunction

Callback fired when the Modal finishes the opening animation.

onShowStartfunction

Callback fired when the Modal starts the opening animation.

styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute.

Use it to target the component in unit and e2e tests.

Create issueEdit page
Copyright © 2021 New Relic Inc.