Modal

Composition

This component is a composition of 6 key components:

LumexModal: A component representing a modal dialog overlay.
LumexModalTrigger: A component representing the trigger that controls the modal display.
LumexModalContent: A component representing the content container of the modal.
LumexModalHeader: A component representing the header of the modal.
LumexModalBody: A component representing the body of the modal.
LumexModalFooter: A component representing the footer of the modal.

Usage

The modal is built on top of the native HTML <dialog> element. This means you can use the command="close" and commandfor attributes on any button element to close the modal declaratively.

Note that these attributes require a <button> element to work, so use the LumexButton component. Alternatively, you can call @context.CloseAsync() to close the modal programmatically.

<LumexModal>
    <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
    <LumexModalContent>
        <LumexModalHeader Class="flex-col gap-3">
            <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                <RocketIcon Size="20" />
            </div>
            Welcome to LumexUI
        </LumexModalHeader>
        <LumexModalBody>
            <p>
                A beautiful, fast, and modern Blazor UI library for building
                customizable web applications with ease.
            </p>
        </LumexModalBody>
        <LumexModalFooter>
            <LumexButton FullWidth="@true"
                         Color="@ThemeColor.Primary"
                         Radius="@Radius.Full"
                         command="close"
                         commandfor="@context.Id">
                Continue
            </LumexButton>
        </LumexModalFooter>
    </LumexModalContent>
</LumexModal>

Sizes

Use Size parameter to control the maximum width of the modal.

<div class="flex flex-wrap gap-3">
    @foreach( var size in Enum.GetValues<ModalSize>() )
    {
        <LumexModal Size="@size">
            <LumexModalTrigger Variant="@Variant.Flat">@size</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Size: @size.ToString()
                </LumexModalHeader>
                <LumexModalBody>
                    @if( size is ModalSize.Full )
                    {
                        <p>
                            This modal uses the <code>Full</code> size variant. It occupies the entire
                            viewport without any margins, rounded corners, or shadows, creating a true
                            fullscreen experience. Ideal for immersive content or full-page
                            interactions.
                        </p>
                    }
                    else
                    {
                        <p>
                            This modal uses the <code>@size</code> size variant. On mobile devices, all
                            sizes adapt to near full-width for optimal viewing. On desktop, each size
                            provides a different maximum width to suit various content needs.
                        </p>
                    }
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

Radius

Use Radius parameter to control the border radius of the modal.

<div class="flex flex-wrap gap-3">
    @foreach( var radius in _radii )
    {
        <LumexModal Radius="@radius">
            <LumexModalTrigger Variant="@Variant.Flat">@radius</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Radius: @radius.ToString()
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal uses the <code>@radius</code> radius variant. The border radius
                        controls how rounded the corners of the modal appear, ranging from sharp
                        edges to fully rounded corners.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

@code {
    private readonly Radius[] _radii = [
        Radius.None,
        Radius.Small,
        Radius.Medium,
        Radius.Large,
    ];
}

Shadows

Use Shadow parameter to control the shadow depth of the modal.

<div class="flex flex-wrap gap-3">
    @foreach( var shadow in Enum.GetValues<Shadow>() )
    {
        <LumexModal Shadow="@shadow">
            <LumexModalTrigger Variant="@Variant.Flat">@shadow</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Shadow: @shadow.ToString()
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal uses the <code>@shadow</code> shadow variant. The shadow controls
                        the depth and elevation of the modal, from no shadow to a large pronounced
                        drop shadow.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

Backdrop

Use Backdrop parameter to change the backdrop style behind the modal.

<div class="flex flex-wrap gap-3">
    @foreach( var backdrop in Enum.GetValues<Backdrop>() )
    {
        <LumexModal Backdrop="@backdrop">
            <LumexModalTrigger Variant="@Variant.Flat">@backdrop</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Backdrop: @backdrop.ToString()
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal uses the <code>@backdrop</code> backdrop variant. Compare the
                        different visual effects: opaque provides full opacity, blur adds a backdrop
                        filter, and transparent removes the background.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

Custom Backdrop

Use the Class parameter to apply a custom gradient backdrop to the modal.

<LumexModal Class="backdrop:bg-linear-to-t backdrop:from-black/80 backdrop:via-black/40 backdrop:to-transparent dark:backdrop:from-zinc-800/80 dark:backdrop:via-zinc-800/40">
    <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
    <LumexModalContent>
        <LumexModalHeader Class="flex-col items-center gap-3">
            <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                <RocketIcon Size="20" />
            </div>
            Premium Backdrop
        </LumexModalHeader>
        <LumexModalBody>
            <p>
                This backdrop features a sophisticated gradient that transitions from a dark color
                at the bottom to complete transparency at the top, combined with a smooth blur
                effect. The gradient automatically adapts its intensity for optimal contrast in both
                light and dark modes.
            </p>
        </LumexModalBody>
        <LumexModalFooter>
            <LumexButton FullWidth="@true"
                         Color="@ThemeColor.Primary"
                         Radius="@Radius.Full"
                         command="close"
                         commandfor="@context.Id">
                Nice!
            </LumexButton>
        </LumexModalFooter>
    </LumexModalContent>
</LumexModal>

Placement

Use Placement parameter to control the position of the modal within the viewport.

<div class="flex flex-wrap gap-3">
    @foreach( var placement in Enum.GetValues<ModalPlacement>() )
    {
        <LumexModal Placement="@placement">
            <LumexModalTrigger Variant="@Variant.Flat">@placement</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Placement: @placement.ToString()
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal uses the <code>@placement</code> placement option. Try different
                        placements to see how the modal positions itself on the screen.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

The Auto placement positions the modal at the bottom on mobile screens and at the center on larger screens.

Scroll behavior

Use ScrollBehavior parameter to control how the modal handles overflow content.

<div class="flex flex-wrap gap-3">
    @foreach( var scrollBehavior in Enum.GetValues<ScrollBehavior>() )
    {
        <LumexModal ScrollBehavior="@scrollBehavior">
            <LumexModalTrigger Variant="@Variant.Flat">@scrollBehavior</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Welcome to LumexUI
                </LumexModalHeader>
                <LumexModalBody>
                    <p class="text-small leading-5">
                        Compare scroll behaviors - inside keeps content scrollable within the modal,
                        outside allows page scrolling
                    </p>

                    @foreach( var i in Enumerable.Range( 1, 30 ) )
                    {
                        <p class="mb-3">
                            Paragraph @(i + 1): Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
                            hendrerit risus, sed porttitor quam.
                        </p>
                    }
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Continue
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    }
</div>

With form

The modal body can contain form elements such as inputs, checkboxes, and links.

<LumexModal>
    <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
    <LumexModalContent>
        <LumexModalHeader>Log In</LumexModalHeader>
        <LumexModalBody>
            <LumexTextbox Label="Email"
                          Placeholder="Enter your email"
                          Variant="@InputVariant.Outlined" />
            <LumexTextbox Label="Password"
                          Placeholder="Enter your password"
                          Type="@InputType.Password"
                          Variant="@InputVariant.Outlined" />
            <div class="flex justify-between px-1 py-2">
                <LumexCheckbox>Remember me</LumexCheckbox>
                <LumexLink Href="/docs/components/modal#"
                           Color="@ThemeColor.Primary"
                           Class="text-small">
                    Forgot password?
                </LumexLink>
            </div>
        </LumexModalBody>
        <LumexModalFooter>
            <LumexButton Color="@ThemeColor.Danger"
                         Variant="@Variant.Flat"
                         command="close"
                         commandfor="@context.Id">
                Close
            </LumexButton>
            <LumexButton Color="@ThemeColor.Primary"
                         command="close"
                         commandfor="@context.Id">
                Sign In
            </LumexButton>
        </LumexModalFooter>
    </LumexModalContent>
</LumexModal>

Close methods

There are multiple ways to close the modal. Use command="close" with commandfor="@context.Id" for a declarative approach, or call @context.CloseAsync() for programmatic control.

Using command/commandfor

The simplest way to close a modal. Add the native command="close" and commandfor attributes to any Button component within the modal. When clicked, it will automatically close the modal.

Using CloseAsync

Access the CloseAsync method from the Modal's context. This gives you full control over when and how to close the modal, allowing you to add custom logic before closing.

<div class="flex max-w-2xl flex-col gap-8">
    <div class="space-y-2">
        <h3 class="text-large font-semibold">Using command/commandfor</h3>
        <p class="text-small text-default-500">
            The simplest way to close a modal. Add the native <code>command="close"</code> and
            <code>commandfor</code> attributes to any Button component within the modal. 
            When clicked, it will automatically close the modal.
        </p>

        <LumexModal>
            <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Using command/commandfor
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal is closed using the native <code>command="close"</code> and
                        <code>commandfor</code> attributes on a button element.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 command="close"
                                 commandfor="@context.Id">
                        Close
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    </div>
    
    <div class="space-y-2">
        <h3 class="text-large font-semibold">Using CloseAsync</h3>
        <p class="text-small text-default-500">
            Access the <code>CloseAsync</code> method from the Modal's context. This gives you full
            control over when and how to close the modal, allowing you to add custom logic before
            closing.
        </p>

        <LumexModal>
            <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
            <LumexModalContent>
                <LumexModalHeader Class="flex-col gap-3">
                    <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                        <RocketIcon Size="20" />
                    </div>
                    Using CloseAsync
                </LumexModalHeader>
                <LumexModalBody>
                    <p>
                        This modal is closed programmatically by calling
                        <code>CloseAsync()</code> on the modal context.
                    </p>
                </LumexModalBody>
                <LumexModalFooter>
                    <LumexButton FullWidth="@true"
                                 Color="@ThemeColor.Primary"
                                 Radius="@Radius.Full"
                                 OnClick="@context.CloseAsync">
                        Close
                    </LumexButton>
                </LumexModalFooter>
            </LumexModalContent>
        </LumexModal>
    </div>
</div>

Two-way data binding

Use @bind-Open directive or Open and OpenChanged parameters to programmatically control the modal's open state.

Open: false

<div class="flex flex-col gap-2">
    <LumexModal @bind-Open="@_isOpen">
        <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
        <LumexModalContent>
            <LumexModalHeader Class="flex-col gap-3">
                <div class="size-10 flex items-center justify-center bg-default-100 rounded-full">
                    <RocketIcon Size="20" />
                </div>
                Welcome to LumexUI
            </LumexModalHeader>
            <LumexModalBody>
                <p>
                    A beautiful, fast, and modern Blazor UI library for building
                    customizable web applications with ease.
                </p>
            </LumexModalBody>
            <LumexModalFooter>
                <LumexButton FullWidth="@true"
                             Color="@ThemeColor.Primary"
                             Radius="@Radius.Full"
                             OnClick="@(() => _isOpen = false)">
                    Confirm
                </LumexButton>
            </LumexModalFooter>
        </LumexModalContent>
    </LumexModal>

    <p class="text-small text-default-500">
        Open: @(_isOpen ? "true" : "false")
    </p>
</div>

@code {
    private bool _isOpen;
}

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

Base: The base container of the modal dialog.
Header: The header section of the modal.
Body: The body section of the modal.
Footer: The footer section of the modal.
CloseButton: The close button element of the modal.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The CSS class name that styles the base of the modal.
Classes: The CSS class names for the modal slots that style entire modal.

<LumexModal Backdrop="@Backdrop.Opaque"
            Radius="@Radius.Large"
            Classes="@_classes">
    <LumexModalTrigger Variant="@Variant.Flat">Open Modal</LumexModalTrigger>
    <LumexModalContent>
        <LumexModalHeader Class="flex-col gap-3">
            <div class="size-10 flex items-center justify-center bg-[#292f46] rounded-full">
                <RocketIcon Size="20" />
            </div>
            Custom styles
        </LumexModalHeader>
        <LumexModalBody>
            <p>
                This modal demonstrates how to customize the appearance of every slot
                using the <code>Classes</code> parameter. The base, header, body, footer,
                and close button styles have all been overridden with custom colors and borders.
            </p>
        </LumexModalBody>
        <LumexModalFooter>
            <LumexButton Color="@ThemeColor.Secondary"
                         Variant="@Variant.Shadow"
                         command="close"
                         commandfor="@context.Id">
                Continue
            </LumexButton>
        </LumexModalFooter>
    </LumexModalContent>
</LumexModal>

@code {
    private readonly ModalSlots _classes = new()
    {
        Base = "border-[#292f46] bg-[#19172c] dark:bg-[#19172c] text-[#a8b0d3] backdrop:bg-[#292f46]/50 backdrop:backdrop-opacity-40",
        Header = "border-b border-[#292f46]",
        Body = "py-6",
        Footer = "border-t border-[#292f46]",
        CloseButton = "hover:bg-white/5 active:bg-white/10",
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Using command/commandfor

Using CloseAsync

Modal

On this page