Modal component


The modal structure is very simple:

  • <Modal> the main container
    • <ModalBackdrop> a transparent overlay that can act as a click target to close the modal
    • <ModalContent> a horizontally and vertically centered container, in which you can include any content
      • <ModalHeader> top part of the modal, usually contains a title and close button
        • <ModalTitle> a modal title
        • <CloseButton> a simple close button located in the top right corner
      • <ModalBody> main part of the modal, holds the input fields, images, etc.
      • <ModalFooter> bottom part of the modal, usually contains the action buttons


Place the modal markup somewhere at root of you component layout.

<SimpleButton Clicked="@ShowModal">Show Modal</SimpleButton>

<Modal ref="modalRef">
    <ModalBackdrop />
    <ModalContent IsCentered="true">
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton Clicked="@HideModal" />
                <TextEdit Placeholder="Enter name..." />
                <TextEdit Placeholder="Enter surname..." />
            <SimpleButton Color="Color.Secondary" Clicked="@HideModal">Close</SimpleButton>
            <SimpleButton Color="Color.Primary" Clicked="@HideModal">Save Changes</SimpleButton>

To work with the modal you must use the reference to the Modal component.

    // reference to the modal component
    private Modal modalRef;

    private void ShowModal()

    private void HideModal()