Surfaces
Dialog
Bit.BlazorUI
A modal pop-up that puts a short decision in front of the page and waits for an answer: a title, a message and an Ok/Cancel pair out of the box, focus that moves in, stays in and comes back, Escape and click-outside dismissal that can be refused, and an answer read from a two-way bound IsOpen or awaited from Show().
Notes
A Dialog is for a decision: a sentence of context and a couple of buttons. For a form, a wizard or a long
read, use Modal instead.
It is named by its Title and described by its Subtitle or Message. A Dialog built from custom content has neither, so give it an AriaLabel or point TitleAriaId at your own heading.
It moves the focus in when it opens, keeps Tab inside, closes on Escape, and gives the focus back to what opened it. AutoToggleScroll is off by default, so the page behind still scrolls unless you turn it on.
It is named by its Title and described by its Subtitle or Message. A Dialog built from custom content has neither, so give it an AriaLabel or point TitleAriaId at your own heading.
It moves the focus in when it opens, keeps Tab inside, closes on Escape, and gives the focus back to what opened it. AutoToggleScroll is off by default, so the page behind still scrolls unless you turn it on.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Bind IsOpen and set a Title and a Message: the header, the close button and the Ok/Cancel pair come
built in, and any of them closes the Dialog.
Buttons
OkText and CancelText relabel the actions - name what happens rather than "Ok". ShowOkButton,
ShowCancelButton and ShowCloseButton remove one each. IsOkButtonEnabled (and
IsCancelButtonEnabled) holds a button shut until the answer exists, while every other way out keeps working.
Header & footer
Subtitle adds a quieter line under the title. HeaderTemplate replaces the title block and keeps the
close button beside it; FooterTemplate adds a band under the body that stays put while the body scrolls.
Custom content
Anything between the tags - or in Body, the same slot - renders in the scrollable body, above the buttons.
Without a Title the Dialog has no accessible name: point TitleAriaId at a heading of your own (an
h2, like the built-in title), or set AriaLabel.
Selected option: -
Result
Result is Ok, Cancel, or null when the Dialog was dismissed without an answer, and
DismissReason names the gesture that closed it. Show() opens the Dialog and awaits the same answer, which
turns a confirmation into one line of code.
Result: -, reason: -
Awaited result: -
Events
OnOk is awaited: a spinner replaces its label and the Dialog closes once it returns - or stays open for another
try when it throws. OnOverlayClick fires for every click on the overlay, and OnDismiss for every closing
the Dialog performs itself (not for the page setting IsOpen).
Last event: -
Dismiss behavior
The overlay and the Escape key both dismiss by default. CloseOnOverlayClick and CloseOnEscape each turn
one off; Blocking turns off both and makes the role alertdialog (IsAlert sets the role by hand).
Modeless drops the overlay so the page stays usable. A refused gesture shakes the surface - a ring under
reduced motion - and raises OnDismissPrevented, so the Dialog can say why.
Guarded close
OnDismissing runs before every closing - the three buttons, the overlay, Escape and Close() - and setting
Cancel refuses it; read Reason to tell them apart. It is awaited, so it can ask first. A refusal plays back
like a refused dismissal and takes the answer back. Leave one way out, like Save here.
Last refused: -
Focus management
By default the focus moves to the first focusable element, Tab cycles inside, and the focus returns to the opener on
close (AutoFocus, TrapFocus, RestoreFocus). AutoFocusButton lands on one of the Dialog's
buttons - the safe answer of a destructive confirmation; AutoFocusSelector (or a
data-autofocus
attribute) picks an element of your own.
Position
Position places the Dialog at one of nine spots on the screen. The Left/Right values are physical; the six
Start/End ones follow the reading direction (see RTL below).
Absolute position & scroll lock
AutoToggleScroll stops the page behind from scrolling while the Dialog is open. AbsolutePosition covers the
nearest positioned ancestor instead of the screen; pair it with ScrollerSelector (or ScrollerElement) to
lock that box instead of the page. Inside a BitAppShell the shell's scroller is locked without either.
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.
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.
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.
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.
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.
Draggable
IsDraggable lets the Dialog be moved by its header - or by its whole surface when it has none - within its area,
and puts it back on the next showing. DragElementSelector names a handle of your own; buttons and fields inside
it keep working.
Nested dialogs
A Dialog opened inside another stacks on top of it. Escape closes only the innermost layer: the nested Dialog, or the
open list of a field inside the Dialog (a combo box, a search box, a date picker) - never both at once.
Keep mounted
A closed Dialog is removed from the DOM, so its content starts fresh on the next showing. KeepMounted hides it
instead and keeps its state - nothing is rendered before the first opening. Type into both, close them, and reopen.
Programmatic control
Open(), Close() and Toggle() drive a Dialog through @ref without binding IsOpen, and
Close() goes through OnDismissing like any gesture. DefaultIsOpen sets the starting state of such an
uncontrolled Dialog.
Cascading parameters
BitParams hands a BitDialogParams to every Dialog under it - labels, buttons, dismiss and focus behavior,
position, size, classes and styles. It only fills in what a Dialog leaves unset, so the second one keeps its own
OkText.
Color
Color paints the Ok and Cancel buttons, the Ok spinner and their focus ring - not the surface. Pair
Error with an AutoFocusButton on Cancel for a destructive confirmation.
External Icons
CloseIconName swaps the close glyph for another built-in one; CloseIcon takes a
BitIconInfo from FontAwesome, Bootstrap Icons or any CSS icon font.
CloseButtonTitle relabels the button for screen readers and its tooltip.
Size
A Dialog fits its content, never outgrows its area, and stops widening at the theme's
--bit-siz-dialog-max-width (or --bit-Dialog-max-width). Width, MinWidth, MaxWidth,
Height, MinHeight and MaxHeight take any CSS length - min(100%, 28rem) is a wider Dialog
that still fits a phone. FullWidth, FullHeight and FullSize stretch it across its area;
--bit-Dialog-margin keeps a gutter between it and the edges.
Style & Class
Style and Class reach the root; Styles and Classes reach each part by name. The public
--bit-Dialog-* CSS variables re-skin the surface, overlay, text and spacing - set them on
:root, on an
ancestor (as here) or on one Dialog's Style.
RTL
Set Dir to Rtl to mirror the Dialog: the close button moves to the left, the actions flip, and the
Start/End positions follow - TopStart lands top-right, while the physical TopLeft stays left.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.
BitDialog CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Dialog-z-index | --bit-zin-modal | Stacking order of the full-screen Dialog. An AbsolutePosition Dialog stacks inside its own area at auto and does not read it; give one a z-index through its own Class or Style. |
| --bit-Dialog-margin | 0 | Space kept between the surface and the edges of its area, for every Position and every size - a gutter on phones, where the surface otherwise reaches the edges. |
| --bit-Dialog-overlay-background | --bit-clr-bg-overlay | Color of the overlay behind the surface. |
| --bit-Dialog-overlay-backdrop-filter | none | Filter applied to the page behind the overlay, e.g. blur(4px). |
| --bit-Dialog-background | --bit-clr-bg-pri | Background of the surface, its header, its buttons band and its footer. |
| --bit-Dialog-color | --bit-clr-fg-pri | Text color of the surface, which the title, the close button and custom content inherit. |
| --bit-Dialog-border-width | 0 | Thickness of the border around the surface. |
| --bit-Dialog-border-color | transparent | Color of the border around the surface. |
| --bit-Dialog-radius | --bit-shp-radius-dialog | Corner radius of the surface and of the bands inside it. |
| --bit-Dialog-shadow | --bit-shd-dialog | Elevation of the surface. |
| --bit-Dialog-padding | --bit-spa-dialog | Inset of the header, the message and the buttons. |
| --bit-Dialog-max-width | --bit-siz-dialog-max-width | Width the surface stops growing at on its own. Ignored by a Dialog given a Width, MaxWidth, FullWidth or FullSize. |
| --bit-Dialog-text-align | --bit-layout-dialog-text-align | Alignment of the title, the subtitle and the message (start, or center under Cupertino). |
| --bit-Dialog-title-color | inherit | Color of the title. |
| --bit-Dialog-title-font-size | --bit-tpg-dialog-title-font-size | Font size of the title. |
| --bit-Dialog-title-font-weight | --bit-tpg-dialog-title-font-weight | Font weight of the title. |
| --bit-Dialog-subtitle-color | --bit-clr-fg-sec | Color of the subtitle. |
| --bit-Dialog-message-color | --bit-clr-fg-sec | Color of the message. |
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, and an Escape a field inside answers first (closing its own open list, or an IME composition) is left to it. |
| CloseOnOverlayClick | bool | true | Dismisses the Dialog when its overlay is clicked. Turn it off to refuse a stray click outside while the Escape key still closes the Dialog; a blocking Dialog refuses the click 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 Blocking and Modeless. |
| Blocking | 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 Disabled, 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. |
| Modeless | bool | false | Whether the Dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the Dialog). If true, Blocking 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 Disabled 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 --bit-Dialog-max-width (the --bit-siz-dialog-max-width theme token unless set), 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 or a click on the overlay the Dialog does not take (CloseOnEscape, CloseOnOverlayClick, Blocking), or a closing OnDismissing turned down. 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 | BitPosition | BitPosition.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. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. |
| 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. |
BitPosition enum
| Name | Value | Description |
|---|---|---|
| TopLeft | 0 | The top left corner, in both reading directions. |
| TopCenter | 1 | The top edge, centered horizontally. |
| TopRight | 2 | The top right corner, in both reading directions. |
| TopStart | 3 | The top edge, on the side the reading direction starts from. |
| TopEnd | 4 | The top edge, on the side the reading direction ends at. |
| CenterLeft | 5 | The left edge, centered vertically, in both reading directions. |
| Center | 6 | Centered both ways. |
| CenterRight | 7 | The right edge, centered vertically, in both reading directions. |
| CenterStart | 8 | Centered vertically, on the side the reading direction starts from. |
| CenterEnd | 9 | Centered vertically, on the side the reading direction ends at. |
| BottomLeft | 10 | The bottom left corner, in both reading directions. |
| BottomCenter | 11 | The bottom edge, centered horizontally. |
| BottomRight | 12 | The bottom right corner, in both reading directions. |
| 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.