express.ui.modal

express.ui.modal(
    *args,
    title=None,
    footer=MISSING,
    size='m',
    easy_close=False,
    fade=True,
    **kwargs,
)

Creates the UI for a modal dialog, using Bootstrap's modal class.

A modal is a dialog box that appears in front of the app. Modals are typically used for showing important messages, or for presenting UI that requires input from the user, such as a user name and/or password input.

Parameters

*args : TagChild | TagAttrs = ()

UI elements for the body of the modal.

title : Optional[str] = None

An optional title for the modal dialog.

footer : TagChild | MISSING_TYPE = MISSING

UI for footer. Use None for no footer.

size : Literal[‘m’, ‘s’, ‘l’, ‘xl’] = 'm'

The size of the modal dialogue box. Use one of “s” for small, “m” (the default) for medium, or “l” for large.

easy_close : bool = False

If True, the modal dialog can be dismissed by clicking outside the dialog box, or by pressing the Escape key. If False (the default), the modal dialog can’t be dismissed in those ways; instead it must be dismissed by clicking on a modal_button(), or from a call to modal_remove() on the server.

fade : bool = True

If False, the modal dialog will have no fade-in animation (it will simply appear rather than fade in to view).

****kwargs** : TagAttrValue = {}

Attributes to be applied to the modal’s body tag.

Returns

: Tag

A UI element

See Also

Examples

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny import reactive
from shiny.express import input, ui

ui.input_action_button("show", "Show modal dialog")


@reactive.effect
@reactive.event(input.show)
def _():
    m = ui.modal(
        "This is a somewhat important message.",
        title="Somewhat important message",
        easy_close=True,
        footer=None,
    )
    ui.modal_show(m)