Type: React component

How to get Modal?


import { Modal } from 'fds/components';

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.


  1. children


    Type: ReactNode

  2. connotation


    Type: String

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

    • 'warning'

    Default value

  3. isFullHeight


    Type: Boolean

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

    Default value

  4. onKeyDown


    Type: 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


    Default value

  5. size


    Type: 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