Basic dialog

<BOBButton Text="Open dialog" OnClick="@(() => _basic = true)" />
<BOBDialog @bind-Open="_basic" Title="Hello">
    <Content>
        <p>This is a basic dialog. Press Escape or click outside to close.</p>
    </Content>
</BOBDialog>

With header + footer

<BOBButton Text="Open dialog with footer" OnClick="@(() => _footer = true)" />
<BOBDialog @bind-Open="_footer" Title="Confirm action">
    <Content>
        <p>Are you sure you want to proceed?</p>
    </Content>
    <Footer>
            <BOBButton Text="Cancel" OnClick="@(() => _footer = false)" />
            <BOBButton Text="Confirm"
                       BackgroundColor="@PaletteColor.Primary"
                       Color="@PaletteColor.PrimaryContrast"
                       OnClick="@(() => _footer = false)" />
    </Footer>
</BOBDialog>

Dimensions

Use MinWidth, MaxWidth, MinHeight, MaxHeight, or FullScreen.

<BOBButton Text="Constrained dialog" OnClick="@(() => _dims = true)" />
<BOBDialog @bind-Open="_dims" Title="400 × 300 min, 600 × 500 max"
           MinWidth="400px" MaxWidth="600px"
           MinHeight="300px" MaxHeight="500px">
    <Content>
        <p>This dialog has custom min/max width and height constraints.</p>
    </Content>
</BOBDialog>

Close options

Toggle Closable, CloseOnOverlayClick, and CloseOnEscape.

<BOBButton Text="Uncloseable dialog" OnClick="@(() => _closeOpts = true)" />
<BOBDialog @bind-Open="_closeOpts"
           Title="Explicit close only"
           Closable="false"
           CloseOnOverlayClick="false"
           CloseOnEscape="false">
    <Content>
        <p>The header X, overlay click, and Escape are all disabled. The only way out is the button below.</p>
    </Content>
    <Footer>
        <BOBButton Text="Close"
                   BackgroundColor="@PaletteColor.Primary"
                   Color="@PaletteColor.PrimaryContrast"
                   OnClick="@(() => _closeOpts = false)" />
    </Footer>
</BOBDialog>

Drawer positions

<BOBButton Text="Left" OnClick="@(() => _left = true)" />
    <BOBButton Text="Right" OnClick="@(() => _right = true)" />
    <BOBButton Text="Top" OnClick="@(() => _top = true)" />
    <BOBButton Text="Bottom" OnClick="@(() => _bottom = true)" />

<BOBDrawer @bind-Open="_left" Position="DrawerPosition.Left">
    <ChildContent>
        <h3>Left drawer</h3>
        <p>Slides in from the left.</p>
    </ChildContent>
</BOBDrawer>

<BOBDrawer @bind-Open="_right" Position="DrawerPosition.Right">
    <ChildContent>
        <h3>Right drawer</h3>
        <p>Slides in from the right.</p>
    </ChildContent>
</BOBDrawer>

<BOBDrawer @bind-Open="_top" Position="DrawerPosition.Top">
    <ChildContent>
        <h3>Top drawer</h3>
        <p>Slides down from the top.</p>
    </ChildContent>
</BOBDrawer>

<BOBDrawer @bind-Open="_bottom" Position="DrawerPosition.Bottom">
    <ChildContent>
        <h3>Bottom drawer</h3>
        <p>Slides up from the bottom.</p>
    </ChildContent>
</BOBDrawer>

Elevation

Material Design elevation level (0–24). Derives shadow and dark-mode surface tint automatically.

<BOBButton Text="Open elevated dialog" OnClick="@(() => _elevationDialog = true)" />
<BOBDialog @bind-Open="_elevationDialog" Title="Elevated dialog" Elevation="4">
    <Content>
        <p>This dialog uses Elevation=4 for medium emphasis.</p>
    </Content>
</BOBDialog>

<BOBButton Text="Open elevated drawer" OnClick="@(() => _elevationDrawer = true)" />
<BOBDrawer @bind-Open="_elevationDrawer" Position="DrawerPosition.Right" Elevation="8">
    <ChildContent>
        <h3>Elevated drawer</h3>
        <p>This drawer uses Elevation=8 for high emphasis.</p>
    </ChildContent>
</BOBDrawer>

Programmatic API

Inject IModalService and call ShowDialogAsync / ShowDrawerAsync.

// Register in Program.cs
services.AddBlazOrbit(); // includes IModalService

// Inject and call
@inject IModalService ModalService

private async Task Show()
{
    var result = await ModalService.ShowDialogAsync<MyConfirmDialog, bool?>(
        null,
        new DialogOptions { Title = "Confirm", MaxWidth = "400px" });
}

// Inside MyConfirmDialog.razor
@implements IModalContent
[CascadingParameter] public ModalReference ModalReference { get; set; } = default!;

<BOBButton Text="Yes" OnClick="() => ModalReference.CloseAsync(true)" />
<BOBButton Text="No"  OnClick="() => ModalReference.CloseAsync(false)" />

Properties

BOBDialog

Property	Type	Default	Description
`Elevation`	`int?`		Material Design elevation level (0–24) applied to the dialog surface. Sets a derived /// shadow and lifts the surface in dark mode via a tint overlay. (default) /// keeps the component-default shadow defined in CSS.
`Open`	`bool`		When , the dialog is visible.
`OpenChanged`	`EventCallback<bool>`		Raised when the dialog opens or closes.
`Title`	`string?`		Text displayed in the dialog header. Ignored when is provided.
`Header`	`RenderFragment?`		Custom header content rendered above the dialog body.
`Content`	`RenderFragment?`		Content rendered inside the dialog body.
`Footer`	`RenderFragment?`		Content rendered inside the dialog footer, typically action buttons.
`Closable`	`bool`	`true`	When (default), a close button is shown in the header.
`CloseOnOverlayClick`	`bool`	`true`	When (default), clicking the overlay closes the dialog.
`CloseOnEscape`	`bool`	`true`	When (default), pressing Escape closes the dialog.
`MinWidth`	`string?`	`"300px"`	Minimum width of the dialog. Accepts any valid CSS length.
`MaxWidth`	`string?`	`"90vw"`	Maximum width of the dialog. Accepts any valid CSS length.
`MinHeight`	`string?`		Minimum height of the dialog. Accepts any valid CSS length.
`MaxHeight`	`string?`	`"90vh"`	Maximum height of the dialog. Accepts any valid CSS length.
`FullScreen`	`bool`		When , the dialog fills the entire viewport.

BOBDrawer

Property	Type	Default	Description
`Elevation`	`int?`		Material Design elevation level (0–24) applied to the drawer surface. Sets a derived /// shadow and lifts the surface in dark mode via a tint overlay. (default) /// keeps the component-default shadow defined in CSS.
`Open`	`bool`		Open.
`OpenChanged`	`EventCallback<bool>`		OpenChanged.
`Header`	`RenderFragment?`		Header.
`ChildContent`	`RenderFragment?`		Content rendered inside the component.
`Footer`	`RenderFragment?`		Footer.
`Position`	`DrawerPosition`	`DrawerPosition.Right`	Position.
`Size`	`string`	`"300px"`	Visual size of the component.
`Closable`	`bool`	`true`	Closable.
`CloseOnOverlayClick`	`bool`	`true`	CloseOnOverlayClick.
`CloseOnEscape`	`bool`	`true`	CloseOnEscape.