Modal

How to get Modal

import { Modal } from 'fds/components';

Type: Component

An overlay covering the entire dimensions of the viewport, often used to input information using a form.

A modal is interruptive, since all interaction in the rest of the application is being blocked until the modal is submitted or cancelled. For this reason modals should be used sparingly.

Expects a ModalHeader, ModalBody and/or ModalFooter component as direct children.

Props

# Name Type Description
1. [children] ReactNode
2. [connotation] String

Specifies the meaning and/or severity of the given context. The possible values are:

  • 'warning'


  Default value
null
3. [isFullHeight] Boolean

Whether or not the component grows to the full available height.

  Default value
false
4. [onKeyDown] Function

A callback that is called whenever a key on the keyboard is pressed. This callback is only fired when the key is pressed down.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
5. [size] String

The size of the modal, should be determined based on the contents of the modal. The possible values are:

  • 'xs' Meant for small, text-only modals like warnings or confirmation messages.

  • 's' Can be used for modals with a little UI in them, like the hyperlink modal.

  • 'm' Medium sized modal, like the special character browser.

  • 'l' Use for UI-heavy modals like image- or file browsers with previews.

  • 'none' The modal fills the entire screen width. Use for modals that need as much screen estate as possible, like publication previews.


  Default value
"none"

Related links

Was this page helpful?