Surfaces
Dialog
Bit.BlazorUI
A modal pop-up that puts a short decision in front of the page and waits for an answer. It comes with a title, a message and an Ok/Cancel pair out of the box, takes the focus and holds it while it is open, closes on Escape or on a click outside, and hands back both which button ended it and which gesture did - either through a two-way bound IsOpen or through an awaitable Show() call.
Notes
A Dialog is for a decision, not for a document: a sentence of context and two buttons. Where the
overlay has to hold a form, a wizard or a long read, reach for
Modal instead.
The Dialog names itself to a screen reader from its Title and describes itself from its
Subtitle or Message, so a Dialog built entirely from custom content has neither - give it an
AriaLabel, or point TitleAriaId and SubtitleAriaId at headings of your own.
IsBlocking is the "you must answer this" switch: it turns off both the click-outside and the Escape
key, and it promotes the ARIA role to
alertdialog so the Dialog interrupts a screen reader.
A dismissal it refuses is answered with a shake rather than swallowed, so the gesture never reads as a page
that has stopped responding - but keep it for the cases that really cannot be walked away from.
IsModeless is the opposite end: no overlay, the page behind stays clickable, Tab is free to walk out
of the Dialog and on into it, and the Dialog announces itself with
aria-modal="false". It still takes the focus when it
opens, the way any dialog does; turn AutoFocus off where it should not.
The focus is the part that is easiest to get wrong. By default the Dialog moves the focus onto the first
thing inside it, keeps Tab cycling within it, and hands the focus back to whatever opened it once it
closes. For a destructive confirmation, point AutoFocusButton at the safe answer so a stray Enter
cannot carry the destructive one out, and use AutoFocusSelector where the field the user came for
is not the first one in the Dialog.
AutoToggleScroll is off by default, so the page behind the overlay still scrolls. Turn it on for a
full-screen modal Dialog, and point ScrollerSelector or ScrollerElement at the right element
when the Dialog is inside a scrollable of its own rather than over the page. A Dialog inside a
BitAppShell holds the shell's scroller without being told
to, since the shell cascades it - the body of such an app never scrolls, so holding it would hold nothing.
OnOk is awaited: the Dialog shows a spinner in place of the Ok text while the callback runs and only
closes once it returns, so a save can hold the Dialog open until it succeeds - and a callback that throws
leaves it open, unanswered, for another try. IsOkButtonEnabled is the other half of that:
it holds the Ok button shut until the content of the Dialog has produced the answer it is asking for.
OnDismissing runs before every closing the Dialog carries out itself, Close() and
Toggle() among them, and setting Cancel on its arguments refuses that closing - which is how
a Dialog holds on to a half-written form without becoming a Dialog that can never be left. Leave one way
out always let through.
A Dialog is unmounted when it closes, which is what keeps a closed one costing nothing. KeepMounted
leaves it in the DOM, hidden, for the case where the content is expensive to build or holds state the user
is meant to come back to - and nothing of it is rendered until the first time it opens, so a Dialog that
is never opened still costs nothing either.
A Dialog is as wide and as tall as its content, never outgrows the area it is positioned in, and stops
widening at the width the theme names, so a short confirmation never spans a desktop screen.
MaxWidth replaces that ceiling where a Dialog wants a wider one, and Color paints its two
action buttons, which is what Error alongside an AutoFocusButton of Cancel is for.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A Dialog needs nothing but a way to open it. Bind IsOpen and give it a Title and a
Message: it renders the header with its close button, the message, and the Ok/Cancel pair,
and closes itself on any of the three.
Buttons
OkText and CancelText relabel the two actions - say what will happen rather than "Ok",
so the answer is readable without the message above it. ShowOkButton, ShowCancelButton
and ShowCloseButton each remove one of the three buttons; a Dialog with none of them left is
still closed by Escape and by a click outside, unless IsBlocking takes those away too.
The answer a Dialog asks for is not always available the moment it opens. IsOkButtonEnabled
holds the Ok button shut until it is - a consent that has to be ticked, a name that has to be typed -
and IsCancelButtonEnabled does the same for Cancel. Unlike IsEnabled, which turns the
whole Dialog off, they leave every other way out working, so a Dialog whose Ok is gated is still a
Dialog that can be walked away from. The focus skips a button it cannot land on: point
AutoFocusButton at a disabled Ok and it falls back to the first focusable element instead.
Header & footer
Subtitle adds a quieter second line under the title, and is what describes the Dialog to a
screen reader when it is set. HeaderTemplate replaces the title block entirely while keeping the
close button beside it, and FooterTemplate adds a band under the body that stays put while the
body scrolls.
Custom content
Anything put between the tags - or into the Body fragment, which is the same slot under another
name - is rendered inside the scrollable body, above the buttons. A Dialog built this way carries no
title of its own, so give it an AriaLabel or point TitleAriaId at the heading you wrote.
Result is:
Result
Result reports the answer the last showing was given: Ok or Cancel when one of
those buttons ended it, and null when it was dismissed with the close button, a click outside
or the Escape key. DismissReason reports the gesture instead - the four above, plus
Programmatic for the page closing the Dialog itself - which is what tells the answerless
endings apart from one another. Both are reset each time the Dialog opens, and both are in place
before OnDismiss and IsOpenChanged run.
Result is: (none yet)
Dismiss reason is: -
Show() opens the Dialog and gives back a task that completes with that same result, which turns
a confirmation into a single awaited line. Whatever ends the showing - a button, a dismissal, or the
page closing the Dialog itself - completes the task, so it never hangs.
Awaited result is: (not shown yet)
Events
OnOpen fires once the Dialog is on screen, OnOk, OnCancel and OnClose each
fire for their own button, OnOverlayClick fires for every click on the overlay whether or not
it goes on to close the Dialog, and OnDismiss fires for every closing the Dialog carries out
itself - a Close() or Toggle() call included, but not the page simply setting
IsOpen to false behind its back.
OnOk is awaited and the Ok button shows a spinner while it runs - press Ok below and
watch it wait a second before the Dialog closes. A callback that throws leaves the Dialog open and
unanswered, so the user can try again.
Last event: -
Dismiss behavior
By default a click on the overlay and the Escape key both dismiss the Dialog. IsBlocking turns
off both and promotes the role to alertdialog, leaving the buttons as the only way out;
IsAlert sets that role by hand where a Dialog should interrupt a screen reader without being
blocking, or should stay a plain dialog while it is.
CloseOnEscape turns off only the key, and IsModeless removes the overlay altogether so
the page behind stays clickable. Try pressing Escape or clicking outside the first two - a dismissal
the Dialog will not act on is answered with a shake rather than silently ignored, and with a ring
around the surface where the reader has asked for less motion. Press again while the shake is still
running and it starts over, so the second gesture is answered as plainly as the first.
OnDismissPrevented fires with the gesture that was refused, so the Dialog can say why instead of
only shaking - and fires for a closing OnDismissing turned down as well, which the next section
is about. Press Escape or click outside the one below.
Guarded close
OnDismissing runs before every closing the Dialog carries out itself - each of its three
buttons, a click on the overlay, the Escape key, and a Close() or Toggle() call - and
setting Cancel on the arguments leaves the Dialog where it is. Read Reason to tell the
gestures apart: holding on to a half-written form when Escape is pressed is not the same as refusing
the Cancel button the user has just aimed at. The callback is awaited, so it can run work of its own
first - a confirmation of its own among it.
A refused closing is played back exactly like a refused dismissal - the surface shakes and OnDismissPrevented is raised with the same reason - and leaves the showing unanswered, so Result is put back to what it was before the button was pressed. NoDismissPreventedAnimation turns off the shake for a Dialog that explains the refusal some other way. Leave one way out that is always let through, the way Save is below, or the Dialog becomes a trap.
A refused closing is played back exactly like a refused dismissal - the surface shakes and OnDismissPrevented is raised with the same reason - and leaves the showing unanswered, so Result is put back to what it was before the button was pressed. NoDismissPreventedAnimation turns off the shake for a Dialog that explains the refusal some other way. Leave one way out that is always let through, the way Save is below, or the Dialog becomes a trap.
Last refused gesture: -
Result is: (none yet)
Focus management
A Dialog moves the focus onto the first focusable element it holds when it opens (AutoFocus),
keeps Tab and Shift+Tab cycling inside it while it is open (TrapFocus), and hands the focus back
to whatever opened it when it closes (RestoreFocus). Open either Dialog below with the keyboard
and tab around to feel the difference.
AutoFocusButton puts the focus on one of the Dialog's own buttons instead. For a
confirmation that cannot be undone, point it at the safe answer so a stray Enter cannot carry
the destructive one out.
AutoFocusSelector names an element of your own instead. The Dialog below opens with a link
above the field, which is where the focus would otherwise land; the selector puts it in the field the
user actually came for. A selector that matches nothing visible falls back to the first focusable
element, so a Dialog whose content varies never opens with the focus left behind on the page.
Absolute position
AbsolutePosition swaps the fixed positioning for absolute, so the Dialog covers its nearest
positioned ancestor instead of the screen. That is what puts a Dialog inside a card or a panel rather
than over the whole page.
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.
Scroll locking
AutoToggleScroll stops the page behind the overlay from scrolling for as long as the Dialog is
open, and gives it back afterwards - including when the Dialog is disposed while still open. The holds
are counted, so a scroller held by two overlays at once is only released by the second of them
to close. ScrollerSelector (or ScrollerElement) names what to lock when the Dialog sits
over a scrollable of its own rather than over the page; inside a BitAppShell the shell's own
scroller is held without either of them being set, since the body of such an app never scrolls.
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.
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.
Position
Position moves the Dialog off the centre of the screen. The Left and Right values
are physical and stay on the same side in both reading directions; the Start and End
values follow the reading direction, so TopStart is the top left in an LTR Dialog and the top
right in an RTL one.
The same two Dialogs in an RTL layout, one pinned to the physical TopLeft and one to the
logical TopStart - which lands on the right, where an RTL reader starts.
Draggable
IsDraggable lets the Dialog be moved around, which is what a modeless Dialog the user needs to
look behind wants. It is dragged by its header, the way a window is dragged by its title bar, so the
content underneath stays selectable and a scrolling body still scrolls on a touch screen; a Dialog
with no header at all is dragged by its whole surface instead - and its body still scrolls under a
finger, since a body that cannot be scrolled is a worse trade than one that has to be dragged by its
edges. DragElementSelector points the grab area at an element of your own. Either way the
Dialog stays inside the area it was positioned in, so it cannot be dragged off an edge and out of
reach, and it comes back where it was laid out the next time it is shown rather than where it was
last left. Both are read again on every render, so the toggle below takes effect on a Dialog that is
already open.
DragElementSelector points the grab area at an element of your own - the title bar of a Dialog
built entirely from custom content, as here. Controls inside the handle keep working: a pointer that
lands on a button, a field or a link is reaching for it rather than asking to move the window.
Nested dialogs
A Dialog opened from inside another one stacks on top of it, and the keyboard follows: Escape closes
only the Dialog that has the focus, so answering the inner one leaves the outer one standing rather
than tearing both of them down with a single key.
Keep mounted
A Dialog is unmounted when it closes, so its content is built afresh - and starts empty - the next
time it opens. KeepMounted leaves it in the DOM, hidden, which keeps whatever the user had
typed, at the cost of that content living and re-rendering for as long as the page does - so it is
for the Dialog whose state is worth coming back to rather than for every Dialog. Nothing is rendered
until the first opening, so the cost starts when the Dialog is first used rather than when the page
is first drawn. Type into both of the Dialogs below, close them, and open them again.
Programmatic control
A Dialog captured with @ref can be driven through its Open, Close and
Toggle methods, which is the way to reach one from code that has no field to bind IsOpen to.
The methods and the binding are the same state, so a Dialog opened through Open() still
closes on Escape or on a click outside - and Close() goes the way the Dialog's own gestures
do, so OnDismissing can refuse it.
DefaultIsOpen is the state a Dialog starts in while it is left to manage its own openness -
that is, while IsOpen is not set at all. It is read once, so closing such a Dialog is not undone by
the next render of the page around it.
Color
Color paints the Ok and Cancel buttons, the Ok spinner and the focus ring around either of
them. It leaves the surface, the title and the message alone, since the color of a Dialog belongs to
the answer it is asking for rather than to the sheet it is asking on. Error, with
AutoFocusButton pointed at the safe answer, is what a destructive confirmation looks like.
The eight semantic colors are the ones to reach for; the background, foreground and border colors
are there for a Dialog that has to match a surface rather than report a severity.
External Icons
The close button takes the Cancel glyph from the built-in Fluent set by default.
CloseIconName swaps it for another built-in one, and CloseIcon takes a
BitIconInfo so the glyph can come from FontAwesome, Bootstrap
Icons or any other CSS icon font. CloseButtonTitle relabels it for screen readers and tooltips.
FontAwesome:
Bootstrap:
Size
A Dialog is as wide and as tall as its content, and never grows past the area it is positioned in.
It stops widening at the width the theme names (--bit-siz-dialog-max-width, a calculated value
that lands on 520px in Fluent by default, 600px in Fluent 2, 560px in Material, 270px in
Cupertino), so a two-sentence confirmation cannot span a desktop screen with its message on
one long line.
Width, MinWidth, MaxWidth, Height, MinHeight and MaxHeight
each take any CSS length and put a size of your own on the surface, replacing that default:
min(100%, 40rem) is the whole of a wider Dialog that still fits a phone.
FullWidth, FullHeight and FullSize stretch the Dialog across the whole area
instead, which is what a Dialog on a phone screen usually wants, and take precedence over the six.
Style & Class
Beyond the root Style and Class, the Styles and Classes parameters take a
BitDialogClassStyles that targets each part on its own - the
overlay, the container, the header and its title, subtitle, close button and icon, the body and its
message, the buttons container with the Ok and Cancel buttons and the Ok spinner, and the footer.
RTL
Set Dir to Rtl to lay the Dialog out for right-to-left languages: the close button moves
to the left of the header, the action buttons mirror, and a Start/End position follows
along with them.
API
Every parameter, public member, sub-class and enum this component exposes.
BitDialog parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AbsolutePosition | bool | false | When true, the Dialog will be positioned absolute instead of fixed, so it covers its nearest positioned ancestor instead of the screen. |
| AutoFocus | bool | true | Moves the focus into the Dialog when it opens, onto the first focusable element it holds, falling back to the Dialog itself when it holds none. |
| AutoFocusButton | BitDialogButton? | null | Which of the Dialog's own buttons AutoFocus lands on, instead of the first focusable element the Dialog holds. Takes precedence over AutoFocusSelector. |
| AutoFocusSelector | string? | null | The CSS selector of the element inside the Dialog that AutoFocus lands on, instead of the first focusable element it holds. A selector that matches nothing visible falls back to that first element. |
| AutoToggleScroll | bool | false | Enables the auto scrollbar toggle behavior of the Dialog, which stops the scroller from scrolling for as long as the Dialog is open. The scroller is the one ScrollerElement or ScrollerSelector names, the one a surrounding BitAppShell cascades when neither does, and the page when there is no shell either. |
| 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. |
| CloseButtonTitle | string? | null | The title (and aria-label) of the close button, for accessibility and localization. Defaults to "Close" when not set. |
| CloseIcon | BitIconInfo? | null | Gets or sets the icon to display for the close button using custom CSS classes for external icon libraries. Takes precedence over CloseIconName when both are set. |
| CloseIconName | string? | null | Gets or sets the name of the icon to display for the close button from the built-in Fluent UI icons. |
| CloseOnEscape | bool | true | Dismisses the Dialog when the Escape key is pressed while the focus is inside it. A blocking Dialog ignores the Escape key whatever this is set to. |
| Color | BitColor? | null | The general color of the Dialog, which its Ok and Cancel buttons, the Ok spinner and the focus ring of both are painted in. Defaults to Primary. |
| DefaultIsOpen | bool? | null | The initial opening state of the Dialog in the uncontrolled mode, which is when the IsOpen parameter is not set. It is read once, at initialization, so closing such a Dialog is not undone by the next render. |
| DragElementSelector | string? | null | The CSS selector of the element the Dialog is dragged by. By default it is the header when the Dialog has one, and the whole container when it has none. |
| FooterTemplate | RenderFragment? | null | Used to customize how the footer inside the Dialog is rendered. |
| FullHeight | bool | false | Makes the Dialog height 100% of the area it is positioned in. |
| FullSize | bool | false | Makes the Dialog width and height 100% of the area it is positioned in. |
| FullWidth | bool | false | Makes the Dialog width 100% of the area it is positioned in. |
| HeaderTemplate | RenderFragment? | null | Used to customize the header of the Dialog, replacing the Title and Subtitle while keeping the close button beside it. |
| Height | string? | null | The CSS height of the Dialog surface. A Dialog is as tall as its content by default, and FullHeight and FullSize take precedence over this. |
| 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 | Prevents the Dialog from being dismissed by a click on the overlay or by the Escape key, leaving its buttons as the only way out. |
| IsCancelButtonEnabled | bool | true | Whether the Cancel button of the Dialog can be pressed. Unlike IsEnabled, which turns the whole Dialog off, this leaves every other way out of the Dialog working. |
| 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, there will be no overlay, and the focus is not trapped - though the Dialog still takes it when it opens unless AutoFocus is turned off. |
| IsOkButtonEnabled | bool | true | Whether the Ok button of the Dialog can be pressed. This is what holds the answer shut until the content of the Dialog provides it - a consent to tick, a name to type - without turning the rest of the Dialog off the way IsEnabled would. |
| IsOpen | bool | false | Whether the Dialog is displayed. |
| IsOpenChanged | EventCallback<bool> | null | A callback function for when the Dialog is opened or closed. |
| KeepMounted | bool | false | Keeps the Dialog in the DOM while it is closed, hidden, instead of removing it - so its content, and whatever state it holds, survives until the next showing. Nothing is rendered until the first time it opens, so a Dialog that is never opened still costs nothing. |
| MaxHeight | string? | null | The CSS maximum height of the Dialog surface. Defaults to 100% of the area the Dialog is positioned in, and setting it replaces that default rather than adding to it. |
| MaxWidth | string? | null | The CSS maximum width of the Dialog surface. Defaults to the narrower of 100% of the area the Dialog is positioned in and the --bit-siz-dialog-max-width theme token, and setting it replaces that default rather than adding to it - min(100%, 32rem) is the whole of a responsive Dialog. |
| Message | string? | null | The message to display in the dialog. It also describes the Dialog to a screen reader unless a Subtitle or a SubtitleAriaId takes that job instead. |
| MinHeight | string? | null | The CSS minimum height of the Dialog surface. |
| MinWidth | string? | null | The CSS minimum width of the Dialog surface, the floor under a Dialog whose message is a handful of words. |
| NoDismissPreventedAnimation | bool | false | Turns off the shake the Dialog plays when a dismissal is refused. OnDismissPrevented is raised either way. |
| 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). It is invoked for every closing the Dialog carries out itself, including a Close or Toggle call, and DismissReason names the gesture that ended the showing by the time it runs. |
| OnDismissing | EventCallback<BitDialogDismissArgs> | null | A callback function invoked before the Dialog closes, letting the closing be refused. Set Cancel on the arguments to leave the Dialog where it is, and read Reason to tell the gestures apart. It is awaited, so it can run asynchronous work of its own. |
| OnDismissPrevented | EventCallback<BitDialogDismissReason> | null | A callback function for when a dismissal was refused: the Escape key on a Dialog that does not take it, or a click on the overlay of a blocking one. The Dialog shakes on its own; this is for saying why. |
| OnOverlayClick | EventCallback<MouseEventArgs> | null | A callback function for when the overlay of the Dialog is clicked, whether or not the click goes on to dismiss the Dialog. |
| OnOk | EventCallback<MouseEventArgs> | null | A callback function for when the Ok button is clicked. The Dialog waits for it before closing and shows a spinner in place of the Ok text while it waits. |
| OnOpen | EventCallback | null | A callback function for when the Dialog is opened. |
| Position | BitDialogPosition | BitDialogPosition.Center | Position of the Dialog on the screen. |
| RestoreFocus | bool | true | Hands the focus back to whatever held it when the Dialog opened, once the Dialog closes. |
| ScrollerElement | ElementReference? | null | Set the element reference for which the Dialog disables its scroll if applicable. Takes precedence over ScrollerSelector when both are set. |
| ScrollerSelector | string? | null | The CSS selector of the element whose scrolling the Dialog holds while it is open, for the layouts whose scroller is not the page itself. A Dialog inside a BitAppShell holds the shell's scroller without being told to; the page (body) is what is held when there is no shell and this is not set. |
| 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. |
| Subtitle | string? | null | The secondary line of the header, under the title. |
| SubtitleAriaId | string? | null | ARIA id for the subtitle of the Dialog, if any. When it is not set, the Dialog describes itself with its own Subtitle, or with its Message when there is no subtitle. |
| 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. When it is not set, the Dialog names itself with its own Title, and falls back to AriaLabel when there is none. |
| TrapFocus | bool? | null | Keeps Tab and Shift+Tab cycling inside the Dialog while it is open. Defaults to true for a normal Dialog and false for a modeless one. |
| Width | string? | null | The CSS width of the Dialog surface. A Dialog is as wide as its content by default, and FullWidth and FullSize take precedence over this. |
BitDialog public members
| Name | Type | Default value | Description |
|---|---|---|---|
| Result | BitDialogResult? | null | The result of the last showing of the Dialog: Ok or Cancel when one of those buttons ended it, and null when it was dismissed without an answer or has not been shown yet. |
| DismissReason | BitDialogDismissReason? | null | What ended the last showing of the Dialog - the gesture that closed it - and null while it is open or before it has been shown at all. It is set before OnDismiss and IsOpenChanged run. |
| Show | Task<BitDialogResult?> | Opens the Dialog and waits for it to close, reporting how it closed. | |
| Open | Task | Opens the Dialog. | |
| Close | Task | Closes the Dialog the same way its own gestures do: OnDismissing gets its say and can refuse it, DismissReason is named Programmatic, and OnDismiss is invoked once it is done. | |
| Toggle | Task | Opens the Dialog when it is closed and closes it when it is open. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitDialogClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitDialog. |
| Document | string? | null | Custom CSS classes/styles for the document element of the BitDialog, the layer that holds the overlay and the container and decides where on the screen the Dialog sits. |
| 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. |
| Subtitle | string? | null | Custom CSS classes/styles for the subtitle of the BitDialog. |
| CloseButton | string? | null | Custom CSS classes/styles for the close button of the BitDialog. |
| CloseIcon | string? | null | Custom CSS classes/styles for the icon of the close button 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. |
| Footer | string? | null | Custom CSS classes/styles for the footer of the BitDialog, the element that wraps the FooterTemplate. |
BitDialogDismissArgs properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Reason | BitDialogDismissReason | What is about to close the Dialog: one of its three buttons, a click on the overlay, the Escape key, or a call to one of its Close and Toggle methods. | |
| Cancel | bool | false | Set to true to refuse the closing and leave the Dialog where it is. A refused closing shakes the surface and raises OnDismissPrevented with the same reason. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitDialogPosition enum
| Name | Value | Description |
|---|---|---|
| Center | 0 | Centered both ways. |
| TopLeft | 1 | The top left corner, in both reading directions. |
| TopCenter | 2 | The top edge, centered horizontally. |
| TopRight | 3 | The top right corner, in both reading directions. |
| CenterLeft | 4 | The left edge, centered vertically. |
| CenterRight | 5 | The right edge, centered vertically. |
| BottomLeft | 6 | The bottom left corner, in both reading directions. |
| BottomCenter | 7 | The bottom edge, centered horizontally. |
| BottomRight | 8 | The bottom right corner, in both reading directions. |
| TopStart | 9 | The top edge, on the side the reading direction starts from. |
| TopEnd | 10 | The top edge, on the side the reading direction ends at. |
| CenterStart | 11 | Centered vertically, on the side the reading direction starts from. |
| CenterEnd | 12 | Centered vertically, on the side the reading direction ends at. |
| BottomStart | 13 | The bottom edge, on the side the reading direction starts from. |
| BottomEnd | 14 | The bottom edge, on the side the reading direction ends at. |
BitDialogResult enum
| Name | Value | Description |
|---|---|---|
| Ok | 0 | The Ok button ended the showing. |
| Cancel | 1 | The Cancel button ended the showing. |
BitDialogDismissReason enum
| Name | Value | Description |
|---|---|---|
| OkButton | 0 | The Ok button ended the showing. |
| CancelButton | 1 | The Cancel button ended the showing. |
| CloseButton | 2 | The close button in the header ended the showing. |
| OverlayClick | 3 | A click on the overlay ended the showing. |
| Escape | 4 | The Escape key ended the showing. |
| Programmatic | 5 | The page closed the Dialog itself, by setting IsOpen or by calling Close or Toggle. |
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
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.