Home Docs

Dialog

Dialogs are temporary pop-ups that take focus from the page or app and require people to interact with them.

Usage

Basic
<BitButton OnClick="@(() => IsOpen = true)">Open Dialog</BitButton>
<BitDialog @bind-IsOpen="IsOpen" Title="Missing Subject" Message="Do you want to send this message without a subject?" />
@code {
    private bool IsOpen = false;
}
Result


Result is: 
<BitButton OnClick="@(() => IsOpen1 = true)">Open Dialog</BitButton>
<span>Result is: @dialogRef?.Result</span>

<BitDialog @ref="@dialogRef"
           @bind-IsOpen="@IsOpen1"
           Title="Missing Subject"
           Message="Do you want to send this message without a subject?" />
@code {
    private bool IsOpen1;
    private BitDialog dialogRef;
}
Events
<BitButton OnClick="@(() => IsOpenEvent = true)">Open Dialog</BitButton>
<BitDialog @bind-IsOpen="IsOpenEvent"
           Title="Missing Subject"
           Message="Do you want to send this message without a subject?"
           OnOk="async () => await Task.Delay(1000)" />
@code {
    private bool IsOpenEvent = false;
}
Custom content


Result is: 


<style>
    .dialog-title {
        display: flex;
        font-size: 24px;
        font-weight: 600;
        align-items: center;
        padding: 12px 12px 14px 24px;
        border-top: 4px solid #0054C6;
        justify-content: space-between;
    }

    .dialog-body {
        max-width: 40rem;
        overflow-y: hidden;
        padding: 0 24px 24px;
    }

    .dialog-footer {
        display: flex;
        align-items: center;
        padding: 0 14px 14px;
        justify-content: flex-end;
    }
</style>


<BitButton OnClick="@(() => IsOpen2 = true)">Open Dialog</BitButton>
<div>Result is: @customDialogRef?.Result</div>
@if (customDialogRef?.Result == BitDialogResult.Ok)
{
    <div>Value is: @optionValue</div>
}

<BitDialog @ref="customDialogRef" @bind-IsOpen="@IsOpen2" ShowCloseButton="false">
    <div class="dialog-title">
        <span>All emails together</span>
    </div>
    <div class="dialog-body">
        <p>
            Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
        </p>
        <br />
        <BitChoiceGroup @bind-Value="optionValue" Label="Basic Options" TItem="BitChoiceGroupOption<string?>" TValue="string?">
            <BitChoiceGroupOption Text="Option A" Value="@("A")" />
            <BitChoiceGroupOption Text="Option B" Value="@("B")" />
            <BitChoiceGroupOption Text="Option C" Value="@("C")" />
        </BitChoiceGroup>
    </div>
</BitDialog>

<BitButton OnClick="@(() => IsOpen3 = true)">Open Dialog</BitButton>
<BitDialog @bind-IsOpen="@IsOpen3" ShowCloseButton="false">
    <Body>
        <div class="dialog-title">
            Delete all
        </div>
        <div class="dialog-body">
            +99 Emails will be deleted.
        </div>
    </Body>
    <FooterTemplate>
        <div class="dialog-footer">
            Are you sure?! there's no going back.
        </div>
    </FooterTemplate>
</BitDialog>
@code {
    private bool IsOpen2 = false;
    private string? optionValue;
    private bool IsOpen3 = false;
}
Advanced options
BitDialog has some advanced options to be customized .
<BitButton OnClick="@(() => IsOpen4 = true)">Open Dialog (IsBlocking = true)</BitButton>
<BitButton OnClick="@(() => IsOpen5 = true)">Open Dialog (AutoToggleScroll = false)</BitButton>

<BitDialog IsBlocking
           @bind-IsOpen="IsOpen4"
           Title="Missing Subject"
           Message="Do you want to send this message without a subject?" />

<BitDialog AutoToggleScroll="false"
           @bind-IsOpen="IsOpen5"
           Title="Missing Subject"
           Message="Do you want to send this message without a subject?" />
@code {
    private bool IsOpen4 = false;
    private bool IsOpen5 = false;
}
Absolute positioning
BitDialog has an absolute position option to further customize it's location.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and inspirations will be built. Soon, these lines will transform into narratives that provoke thought, spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty in potential the quiet magic of beginnings, where everything is still to come, and the possibilities are boundless. This space is yours to craft, yours to shape, yours to bring to life.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new—an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
Imagine this space as a window into the future empty yet alive with the energy of endless possibilities. These words stand as temporary guides, placeholders that whisper of what is to come. They hold the promise of stories waiting to unfold, ideas eager to take shape, and connections that will soon emerge to inspire and resonate. This is not an empty page; it is a canvas, rich with potential and ready to transform into something meaningful. For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony, the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions, and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your starting point. The possibilities are endless, and the journey begins now. 
<style>
    .relative-container {
        width: 100%;
        height: 400px;
        overflow: auto;
        margin-top: 1rem;
        position: relative;
        background-color: #eee;
        border: 2px lightgreen solid;
    }
</style>

<BitButton OnClick="@(() => IsOpen6 = true)">Open Dialog (AbsolutePosition = true)</BitButton>
<BitButton OnClick="@(() => IsOpen7 = true)">Open Dialog (ScrollerSelector)</BitButton>

<div class="relative-container">

    <BitDialog AbsolutePosition IsModeless
               @bind-IsOpen="IsOpen6"
               AutoToggleScroll="false"
               Title="Missing Subject"
               Message="Do you want to send this message without a subject?" />

    <BitDialog AbsolutePosition
               @bind-IsOpen="IsOpen7"
               ScrollerSelector=".relative-container"
               Title="Missing Subject"
               Message="Do you want to send this message without a subject?" />

    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
    <br />
    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
    <br />
    In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
    to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
    possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
    vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
    shaped into meaning, and the emotions ready to resonate with every reader.
    <br />
    In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
    each word has the power to transform into something extraordinary. Here lies the start of something new—an
    opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
    idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
    begins here, in this quiet moment where everything is possible.
    <br />
    Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
    These words stand as temporary guides, placeholders that whisper of what is to come.
    They hold the promise of stories waiting to unfold, ideas eager to take shape, and connections that will
    soon emerge to inspire and resonate. This is not an empty page; it is a canvas, rich with potential and
    ready to transform into something meaningful.
    For now, these lines are here to remind you of the beauty of beginnings.
    They are the quiet before the symphony, the foundation upon which your creativity will build.
    Soon, this space will hold your thoughts, your visions, and your voice a reflection of who you
    are and what you wish to share with the world. Every sentence will carry purpose, every word
    will invite others to connect, to think, to feel.
    So take a moment to dream, to imagine what this blank slate can become.
    Whether it’s a story, an idea, or a message that matters, this is your starting point.
    The possibilities are endless, and the journey begins now.
</div>
@code {
    private bool IsOpen6 = false;
    private bool IsOpen7 = false;
}
Position
To set the Dialog position on the page you can use the Position parameter.
<BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.TopLeft)">Top Left</BitButton>
<BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.TopRight)">Top Right</BitButton>
<BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.BottomLeft)">Bottom Left</BitButton>
<BitButton OnClick="() => OpenDialogInPosition(BitDialogPosition.BottomRight)">Bottom Right</BitButton>

<BitDialog @bind-IsOpen="IsOpenInPosition"
           Position="position"
           Title="Missing Subject"
           Message="Do you want to send this message without a subject?" />
@code {
    private bool IsOpenInPosition = false;
    private BitDialogPosition position;
    
    private void OpenDialogInPosition(BitDialogPosition positionValue)
    {
        IsOpenInPosition = true;
        position = positionValue;
    }
}
Draggable

Using custom drag element.
<style>
    .dialog-title {
        display: flex;
        font-size: 24px;
        font-weight: 600;
        align-items: center;
        padding: 12px 12px 14px 24px;
        border-top: 4px solid #0054C6;
        justify-content: space-between;
    }

    .dialog-body {
        max-width: 40rem;
        overflow-y: hidden;
        padding: 0 24px 24px;
    }
</style>

<BitToggle Label="Is Draggable?" @bind-Value="IsDraggable" />

<BitButton OnClick="@(() => IsOpen8 = true)">Open Dialog</BitButton>
<BitDialog @bind-IsOpen="IsOpen8"
           IsDraggable="IsDraggable"
           Title="Draggable dialog"
           Message="Do you want to send this message without a subject?" />

<BitButton OnClick="@(() => IsOpen9 = true)">Open Dialog</BitButton>
<BitDialog IsDraggable @bind-IsOpen="IsOpen9" ShowCloseButton="false" DragElementSelector=".dialog-title-drag">
    <div class="dialog-title dialog-title-drag">
        <span>Draggble Dialog with custom drag element</span>
        <BitButton Variant="BitVariant.Text" OnClick=@(() => IsOpen9 = false) IconName="@BitIconName.ChromeClose" Title="Close" />
    </div>
    <div class="dialog-body">
        <p>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </p>
    </div>
</BitDialog>
@code {
    private bool IsDraggable = false;
    private bool IsOpen8 = false;
    private bool IsOpen9 = false;
}
RTL
<BitButton Dir="BitDir.Rtl" OnClick="@(() => IsOpen10 = true)">باز کردن پنجره پیام</BitButton>
<BitDialog @bind-IsOpen="IsOpen10" 
           Dir="BitDir.Rtl"
           Title="بدون موضوع"
           OkText="تایید"
           CancelText="انصراف"
           Message="آیا می خواهید این پیام را بدون موضوع ارسال کنید؟" />
@code {
    private bool IsOpen10 = false;
}

API

BitDialog parameters
Name
Type
Default value
Description
AutoToggleScroll bool false Enables the auto scrollbar toggle behavior of the Dialog.
AbsolutePosition bool false When true, the Dialog will be positioned absolute instead of fixed.
Body RenderFragment? null Alias for child content.
CancelText string? Cancel The text of the cancel button.
ChildContent RenderFragment? null The content of the Dialog, it can be any custom tag or text.
Classes BitDialogClassStyles? null Custom CSS classes for different parts of the BitDialog component.
DragElementSelector string? null The CSS selector of the drag element. By default, it's the Dialog container.
FooterTemplate RenderFragment? null Used to customize how the footer inside the Dialog is rendered.
IsAlert bool? null Determines the ARIA role of the Dialog (alertdialog/dialog). If this is set, it will override the ARIA role determined by IsBlocking and IsModeless.
IsBlocking bool false Whether the Dialog can be light dismissed by clicking outside the Dialog (on the overlay).
IsDraggable bool false Whether the Dialog can be dragged around.
IsModeless bool false Whether the Dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the Dialog). If true, IsBlocking is ignored, and there will be no overlay.
IsOpen bool false Whether the Dialog is displayed.
IsOpenChanged EventCallback<bool> null A callback function for when the Dialog is opened or closed.
Message string? null The message to display in the dialog.
OkText string? Ok The text of the ok button.
OnCancel EventCallback<MouseEventArgs> null A callback function for when the Cancel button is clicked.
OnClose EventCallback<MouseEventArgs> null A callback function for when the Close button is clicked.
OnDismiss EventCallback<MouseEventArgs> null A callback function for when the the dialog is dismissed (closed).
OnOk EventCallback<MouseEventArgs> null A callback function for when the Ok button is clicked.
Position BitDialogPosition BitDialogPosition.Center Position of the Dialog on the screen.
ScrollerSelector string body Set the element selector for which the Dialog disables its scroll if applicable.
ShowCancelButton bool true Shows or hides the cancel button of the Dialog.
ShowCloseButton bool true Shows or hides the close button of the Dialog.
ShowOkButton bool true Shows or hides the ok button of the Dialog.
Styles BitDialogClassStyles? null Custom CSS styles for different parts of the BitDialog component.
SubtitleAriaId string? null ARIA id for the subtitle of the Dialog, if any.
Title string? null The title text to display at the top of the dialog.
TitleAriaId string? null ARIA id for the title of the Dialog, if any.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitDialogClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitDialog.
Overlay string? null Custom CSS classes/styles for the overlay of the BitDialog.
Container string? null Custom CSS classes/styles for the container of the BitDialog.
Header string? null Custom CSS classes/styles for the header of the BitDialog.
Body string? null Custom CSS classes/styles for the body of the BitDialog.
Title string? null Custom CSS classes/styles for the title of the BitDialog.
Message string? null Custom CSS classes/styles for the message of the BitDialog.
ButtonsContainer string? null Custom CSS classes/styles for the buttons container of the BitDialog.
Spinner string? null Custom CSS classes/styles for the spinner of the ok button of the BitDialog.
OkButton string? null Custom CSS classes/styles for the ok button of the BitDialog.
CancelButton string? null Custom CSS classes/styles for the cancel button of the BitDialog.
BitDialogPosition enum
Name
Value
Description
Center 0
TopLeft 1
TopCenter 2
TopRight 3
CenterLeft 4
CenterRight 5
BottomLeft 6
BottomCenter 7
BottomRight 8
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page