Modal

inprogress

    Overview

    When to use

    Modal appears on top of the main content and moves the system into a special mode requiring user interaction. It blocks interaction with the main content until an action is taken.

    When to consider an alternative

    t.b.d.


    Component

    Default

    Size

    Programatically close

    Unclosable

    Pass the unclosable prop with the open prop to make the modal only closable via an action

    Updating unclosable state

    With EntityList


    Properties

    Default

    PropertyTypeRequiredDefaultDescription
    utilClassNamesStringfalse-
    childrenNodefalse-
    componentRefShape
    { "current": "Any" }
    false-
    sizeEnum
    "default" │ "small" │ "fullscreen"
    false-
    triggerNodefalse-
    headerNodefalse-
    footerNodefalse-
    openBoolfalse-
    unclosableBoolfalsefalse
    onCloseFuncfalse-
    onDismissFuncfalse-
    returnFocusBoolfalsefalseReturns focus to trigger on dismiss
    bodyPaddingEnumfalseModal.Spacer.spaceM