# MessageBox
**Also known as:** Confirm, Alert, MsgBox
## Description
BitMessageBox is a ready-made box for a message with a title, a body, an optional severity icon and the buttons it is answered with (Ok, Ok/Cancel, Yes/No, Yes/No/Cancel or none). Render it inline, inside a BitModal, or through the BitMessageBoxService, which shows it in a modal and returns the BitMessageBoxResult it was answered with.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AutoFocus | `bool` | false | Moves the focus onto the default action button (see DefaultButton) once the message box is rendered, and on every opening of a modal it stays mounted in. The BitMessageBoxService turns it on for the boxes it shows. |
| AutoLoading | `bool` | false | Enables the loading state of the action button that was pressed for as long as its callback runs. |
| Body | `string?` | null | The body of the message box. Line breaks in it are kept and long lines wrap. Its id is {Id}-bdy, for the aria-describedby of a modal around it. |
| BodyTemplate | `RenderFragment?` | null | The template of the body of the message box, which takes the place of Body. |
| Buttons | `BitMessageBoxButtons` | BitMessageBoxButtons.Ok | The set of buttons the message box renders in its footer. |
| ButtonColor | `BitColor?` | null | The color of the action buttons of the message box. Tertiary by default. |
| CancelText | `string?` | null | The text of the Cancel button. |
| ChildContent | `RenderFragment?` | null | The alias of BodyTemplate. |
| Classes | `BitMessageBoxClassStyles?` | null | Custom CSS classes for different parts of the message box. |
| CloseButtonTitle | `string?` | null | The title (and aria-label) of the close button, for accessibility and localization. Defaults to "Close". |
| CloseIcon | `BitIconInfo?` | null | The icon of the close button, provided as custom CSS classes of an external icon library. |
| CloseIconName | `string?` | null | The name of the icon of the close button, from the built-in Fluent UI icons. |
| Color | `BitColor?` | null | The general color of the message box, which paints its leading icon and - unless IconName says otherwise - picks the glyph. An explicit value wins over --bit-MessageBox-icon-color; left unset, the icon takes the text color unless that variable says otherwise. |
| DefaultButton | `BitMessageBoxResult?` | null | The action button that AutoFocus moves the focus onto, or None for the close button. Defaults to the affirmative button of the set (Ok, or Yes), and to the close button for a message box that renders no action buttons. |
| FooterTemplate | `RenderFragment?` | null | The template used to render the footer of the message box, which takes the place of its action buttons. The controls in it are the page's own, so AnswerAsync is what ends the message box with an answer; the box is cascaded, so a component of your own in it can take it as a [CascadingParameter] BitMessageBox. |
| HeaderTemplate | `RenderFragment?` | null | The template used to render the header of the message box, which takes the place of its icon, title and close button. |
| HideIcon | `bool` | false | Removes the leading icon of the message box, which a Color would otherwise bring with it. |
| Icon | `BitIconInfo?` | null | The leading icon of the message box, provided as custom CSS classes of an external icon library. |
| IconAriaLabel | `string?` | null | The accessible name of the leading icon, which turns it from decoration into an image that is announced. |
| IconName | `string?` | null | The name of the leading icon of the message box, from the built-in Fluent UI icons. If unset, the icon is selected automatically based on Color. |
| IconTemplate | `RenderFragment?` | null | The template used to render the leading icon of the message box. |
| NoText | `string?` | null | The text of the No button. |
| OkText | `string?` | null | The text of the Ok button. |
| OnBeforeResult | `EventCallback<BitMessageBoxBeforeResultArgs>` | | The event callback asked before the message box hands over an answer. Setting Cancel on its arguments refuses the answer and keeps the message box open. It guards every button the message box draws, the close button included. |
| OnCancel | `EventCallback` | | The event callback for the Cancel button of the message box. |
| OnClose | `EventCallback` | | The event callback for closing the message box, raised by every button it renders of its own - after the callback of that button and after OnResult. |
| OnNo | `EventCallback` | | The event callback for the No button of the message box. |
| OnOk | `EventCallback` | | The event callback for the Ok button of the message box. |
| OnResult | `EventCallback<BitMessageBoxResult>` | | The event callback for the answer the message box was given. The close button answers with None, the others with the result they stand for. |
| OnYes | `EventCallback` | | The event callback for the Yes button of the message box. |
| PrimaryButtonColor | `BitColor?` | null | The color of the affirmative action button (Ok, or Yes), which falls back to ButtonColor where it is not set. |
| Reversed | `bool` | false | Renders the action buttons in the reverse order, which also reverses the order the keyboard reaches them in. |
| ShowCloseButton | `bool` | true | Renders the close button in the header of the message box. |
| Size | `BitSize?` | null | The size of the message box, which scales its inset, its title, its body text and its leading icon together. An explicit value wins over the --bit-MessageBox-* size variables; left unset, the message box is medium unless they say otherwise. |
| Styles | `BitMessageBoxClassStyles?` | null | Custom CSS styles for different parts of the message box. |
| Title | `string?` | null | The title of the message box. Its id is {Id}-ttl, for the aria-labelledby of a modal around it. |
| TitleElement | `string?` | null | The HTML element the title is rendered as (h5 by default). Pick the heading level that fits the page outline - h2 is usual for a dialog; the look does not change. |
| YesText | `string?` | null | The text of the Yes button. |
| 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. An attribute written on the component wins over an entry of the same name. |
| 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. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AnswerAsync | `Task` | | Answers the message box as though the button standing for that result had been pressed, down the same road: the guard is asked first, then the callback of that answer, OnResult and OnClose. This is how a footer of your own ends the message box with a real answer. |
| Result | `BitMessageBoxResult` | BitMessageBoxResult.None | The answer the last showing of this message box was given, or None while it has not been answered. |
| FocusAsync | `ValueTask` | | Moves the focus onto the default action button of the message box, or onto its close button where it renders no action buttons of its own. |
| 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. |
## Enums
### BitMessageBoxButtons Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ok | 0 | A single Ok button, which answers with BitMessageBoxResult.Ok. |
| OkCancel | 1 | An Ok and a Cancel button. |
| YesNo | 2 | A Yes and a No button. |
| YesNoCancel | 3 | A Yes, a No and a Cancel button. |
| None | 4 | No action buttons at all, which leaves the footer off the message box entirely: it is dismissed rather than answered, so it answers with BitMessageBoxResult.None. |
### BitMessageBoxResult Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| None | 0 | The message box was dismissed rather than answered: its close button, or - for one shown through the service - the Escape key, a click on the overlay, or the page closing the modal itself. |
| Ok | 1 | The Ok button ended the showing. |
| Cancel | 2 | The Cancel button ended the showing. |
| Yes | 3 | The Yes button ended the showing. |
| No | 4 | The No button ended the showing. |
### 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. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitInputType Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Text | 0 | The input expects text characters. |
| Password | 1 | The input expects password characters. |
| Number | 2 | The input expects number characters. |
| Email | 3 | The input expects email characters. |
| Tel | 4 | The input expects tel characters. |
| Url | 5 | The input expects url characters. |
| Search | 6 | The input expects a search term, which is what lets a browser offer the previous searches of the same field and show its own clear affordance. |
### 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. |
## Sub Classes
### BitMessageBoxClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitMessageBox. |
| Container | `string?` | null | Custom CSS classes/styles for the container of the BitMessageBox. |
| Header | `string?` | null | Custom CSS classes/styles for the header of the BitMessageBox. |
| IconContainer | `string?` | null | Custom CSS classes/styles for the icon container of the BitMessageBox. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitMessageBox. |
| Title | `string?` | null | Custom CSS classes/styles for the title of the BitMessageBox. |
| Spacer | `string?` | null | Custom CSS classes/styles for the BitSpacer of the BitMessageBox. |
| CloseButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for the CloseButton of the BitMessageBox. |
| Body | `string?` | null | Custom CSS classes/styles for the body of the BitMessageBox. |
| Footer | `string?` | null | Custom CSS classes/styles for the footer of the BitMessageBox. |
| ActionButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for every action button of the BitMessageBox that was given none of its own. |
| OkButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for the OkButton of the BitMessageBox. |
| CancelButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for the CancelButton of the BitMessageBox. |
| YesButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for the YesButton of the BitMessageBox. |
| NoButton | `BitButtonClassStyles?` | null | Custom CSS classes/styles for the NoButton of the BitMessageBox. |
### BitMessageBoxBeforeResultArgs Properties
The arguments of the OnBeforeResult callback, which is asked before a message box hands over the answer a button of its own was pressed for.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Result | `BitMessageBoxResult` | BitMessageBoxResult.None | The answer that is about to be handed over: the result of the button that was pressed, or None for the close button. Read-only - Cancel is the guard's say over it. |
| Cancel | `bool` | false | Set to true to keep the message box open and hand over no answer. |
| CancellationToken | `CancellationToken` | | Cancelled when the close or the Cancel button takes the answer back while the guard is still working it out. Hand it to the guard's slow work; an answer taken back is never handed over. |
### BitMessageBoxParameters Properties
The set of parameters a message box shown through the BitMessageBoxService is customized with. Every member is nullable and null means "not set", so the BitMessageBox default stands.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AutoFocus | `bool?` | null | Moves the focus onto the default action button. Defaults to true for a message box shown through the service. |
| AutoLoading | `bool?` | null | Enables the loading state of the action button that was pressed for as long as its callback runs. |
| Body | `string?` | null | The body of the message box, which is also what describes the dialog it is shown in. |
| BodyTemplate | `RenderFragment?` | null | The template of the body of the message box. |
| Buttons | `BitMessageBoxButtons?` | null | The set of buttons the message box renders in its footer. |
| ButtonColor | `BitColor?` | null | The color of the action buttons of the message box. |
| CancelText | `string?` | null | The text of the Cancel button. |
| Classes | `BitMessageBoxClassStyles?` | null | Custom CSS classes for different parts of the message box. |
| CloseButtonTitle | `string?` | null | The title (and aria-label) of the close button. |
| CloseIcon | `BitIconInfo?` | null | The icon of the close button, provided as custom CSS classes of an external icon library. |
| CloseIconName | `string?` | null | The name of the icon of the close button, from the built-in Fluent UI icons. |
| Color | `BitColor?` | null | The general color of the message box, which is the severity of its message. Warning, SevereWarning and Error are announced as alerts. An explicit value wins over --bit-MessageBox-icon-color. |
| DefaultButton | `BitMessageBoxResult?` | null | The action button the focus is moved onto, or None for the close button. |
| Dir | `BitDir?` | null | The general directionality of the message box and of the modal it is shown in. |
| FooterTemplate | `RenderFragment?` | null | The template used to render the footer of the message box. A component of your own in it takes the box as a [CascadingParameter] BitMessageBox and answers the showing with its AnswerAsync. |
| HeaderTemplate | `RenderFragment?` | null | The template used to render the header of the message box. |
| HideIcon | `bool?` | null | Removes the leading icon of the message box. |
| Icon | `BitIconInfo?` | null | The leading icon of the message box, provided as custom CSS classes of an external icon library. |
| IconAriaLabel | `string?` | null | The accessible name of the leading icon. |
| IconName | `string?` | null | The name of the leading icon of the message box, from the built-in Fluent UI icons. |
| IconTemplate | `RenderFragment?` | null | The template used to render the leading icon of the message box. |
| Id | `string?` | null | The id of the rendered message box. The service generates one when none is given, since the ids of the title and the body are derived from it. |
| Modal | `BitModalParameters?` | null | The parameters of the BitModal the message box is shown in. What is set here wins over the values the service works out on its own. |
| NoText | `string?` | null | The text of the No button. |
| OkText | `string?` | null | The text of the Ok button. |
| OnBeforeResult | `EventCallback<BitMessageBoxBeforeResultArgs>` | | The event callback asked before the message box hands over an answer. Setting Cancel on its arguments keeps the message box open and leaves the caller of the service still waiting. |
| Persistent | `bool?` | null | Keeps the message box alive through the lifecycle of the application until it is closed, rather than only for as long as the modal container that renders it. |
| PrimaryButtonColor | `BitColor?` | null | The color of the affirmative action button (Ok, or Yes), which falls back to ButtonColor. |
| Reversed | `bool?` | null | Renders the action buttons in the reverse order. |
| ShowCloseButton | `bool?` | null | Renders the close button in the header of the message box. |
| Size | `BitSize?` | null | The size of the message box. An explicit value wins over the --bit-MessageBox-* size variables. |
| Styles | `BitMessageBoxClassStyles?` | null | Custom CSS styles for different parts of the message box. |
| Title | `string?` | null | The title of the message box, which is also what names the dialog it is shown in. |
| TitleElement | `string?` | null | The HTML element the title is rendered as (h5 by default). |
| YesText | `string?` | null | The text of the Yes button. |
### BitMessageBoxPromptParameters Properties
The parameters of BitMessageBoxService.Prompt: everything BitMessageBoxParameters sets, plus the text field the answer is typed into.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AsyncValidator | `Func<string, CancellationToken, Task<string?>>?` | null | An asynchronous check (a server call) run on answering, after Required and Validator accept the value: return an error message to refuse it, or null to accept it. The field shows it is busy meanwhile, and an edit takes its message away. The token is cancelled when the check is given up on (Cancel, the close button, Escape, the token of the showing); an exception it throws closes the box and is rethrown out of Prompt. |
| AutoComplete | `string?` | null | The autocomplete attribute of the text field, such as off, username or current-password. |
| CanRevealPassword | `bool?` | null | Adds a button to a Password field that shows what was typed. |
| Description | `string?` | null | The help text under the text field, which also describes it. |
| InputType | `BitInputType?` | null | The type of the text field, such as Password or Email. Text by default. |
| Label | `string?` | null | The visible label of the text field. Without one the question in the body names the field. |
| MaxLength | `int?` | null | The maximum number of characters the text field accepts. |
| Multiline | `bool?` | null | Renders a multi-line text field, where Enter starts a new line and Ctrl+Enter answers the box. |
| Placeholder | `string?` | null | The placeholder of the text field. |
| Required | `bool?` | null | Refuses an empty or white-space answer, showing RequiredMessage under the field. |
| RequiredMessage | `string?` | null | The error message a Required field shows when it is left empty. "A value is required." by default. |
| Validator | `Func<string, string?>?` | null | Checks the answer before it is accepted: return an error message to refuse it (shown under the field), or null to accept it. Re-runs on every edit once a value has been refused. An empty field is checked as an empty string, never null. |
| Value | `string?` | null | The initial value of the text field, selected when the box opens. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-MessageBox-padding` | var(--bit-spa-dialog) | Inset of the message box. The Size parameter wins over it. |
| `--bit-MessageBox-gap` | spacing(2) | Room between the header, the body and the footer. |
| `--bit-MessageBox-min-width` | spacing(40) | Width the message box does not shrink below (never past the max width, unset on small screens). The Size parameter wins over it. |
| `--bit-MessageBox-max-width` | var(--bit-siz-dialog-max-width) in a modal, 100% inline | Width the message box stops growing at: the theme's dialog width where it is the content of a modal, its container's width where it is rendered inline. |
| `--bit-MessageBox-max-height` | the screen height a modal leaves | Height past which the body scrolls (header and footer stay put). |
| `--bit-MessageBox-text-align` | var(--bit-layout-dialog-text-align) | Alignment of the title and the body. |
| `--bit-MessageBox-icon-color` | the text color | Color of the leading icon. The Color parameter wins over it. |
| `--bit-MessageBox-icon-size` | var(--bit-siz-icon-md) | Size of the leading icon. The Size parameter wins over it. |
| `--bit-MessageBox-title-color` | var(--bit-clr-fg-pri) | Color of the title. |
| `--bit-MessageBox-title-font-size` | var(--bit-tpg-dialog-title-font-size) | Size of the title. The Size parameter wins over it. |
| `--bit-MessageBox-title-font-weight` | var(--bit-tpg-dialog-title-font-weight) | Weight of the title. |
| `--bit-MessageBox-body-color` | var(--bit-clr-fg-sec) | Color of the body. |
| `--bit-MessageBox-body-font-size` | var(--bit-tpg-fs-md) | Size of the body. The Size parameter wins over it. |
| `--bit-MessageBox-actions-gap` | spacing(2) | Room between the action buttons. |
| `--bit-MessageBox-actions-justify` | var(--bit-layout-dialog-actions-justify) | How the action buttons sit along the footer. |
## Examples
\n**Basic**:
```razor
🎉
Delete forever
Keep it
Show
```
```csharp
private bool isModalOpen;
```
\n**BitModalService**:
```razor
Show MessageBox
(modalRef => new()
{
{ nameof(BitMessageBox.Title), "This is a title" },
{ nameof(BitMessageBox.Body), "This is a body." },
{ nameof(BitMessageBox.AutoFocus), true },
{ nameof(BitMessageBox.Buttons), BitMessageBoxButtons.OkCancel },
{ nameof(BitMessageBox.OnResult), EventCallback.Factory.Create(this, r => modalRef.CloseWith(r)) }
});
modalServiceResult = (await modalRef.Result) as BitMessageBoxResult? ?? BitMessageBoxResult.None;
}
```
\n**BitMessageBoxService**:
```razor
Show
Info
Success
Warning
SevereWarning
Error
Closes in 5s
Confirm
Delete something
Rename
New folder
Password
Feedback
IsFolderNameTaken(string name, CancellationToken cancellationToken)
{
await Task.Delay(800, cancellationToken);
return string.Equals(name.Trim(), "Projects", StringComparison.OrdinalIgnoreCase) ? "A folder with this name already exists." : null;
}
private async Task ShowPasswordPrompt()
{
var password = await messageBoxService.Prompt(new()
{
Title = "Delete the account?",
Body = "Enter your password to confirm.",
Color = BitColor.Error,
Label = "Password",
InputType = BitInputType.Password,
AutoComplete = "current-password",
CanRevealPassword = true,
Required = true,
OkText = "Delete",
PrimaryButtonColor = BitColor.Error
});
// The password itself is the caller's to check; only whether one was given is shown here.
promptResult = password is null ? null : "(a password)";
}
private async Task ShowMultilinePrompt()
{
promptResult = await messageBoxService.Prompt(new()
{
Title = "Feedback",
Body = "What could be better?",
Multiline = true,
OkText = "Send"
});
}
```
\n**Cascading parameters**:
```razor
```
```csharp
private readonly BitMessageBoxParams[] messageBoxParams =
[
new()
{
Size = BitSize.Small,
YesText = "Save",
NoText = "Don't save",
CancelText = "Go back",
CloseButtonTitle = "Dismiss",
PrimaryButtonColor = BitColor.Primary,
DefaultButton = BitMessageBoxResult.Cancel
}
];
```
\n**Color**:
```razor
Last answer: @buttonsResult
```
```csharp
private BitMessageBoxResult buttonsResult;
```
\n**Order, focus & emphasis**:
```razor
Everything in Design system is removed, including:
Read what this means
- 18 projects
- 4 shared libraries
Last answer: @templatesResult
```
```csharp
private BitMessageBox? templatesMessageBox;
private BitMessageBoxResult templatesResult;
```
\n**Guarding the answer**:
```razor
Last answer: @guardResult
@if (guardRefused)
{
- the last Delete was refused, since the box was not ticked.
}
```
```csharp
private bool guardConfirmed;
private bool guardRefused;
private BitMessageBoxResult guardResult;
private async Task HandleBeforeResult(BitMessageBoxBeforeResultArgs args)
{
guardRefused = false;
// Only the destructive answer is guarded: Keep and the close button end the box as they always would.
if (args.Result is not BitMessageBoxResult.Yes) return;
// The work the answer starts, which AutoLoading spins the pressed button through.
await Task.Delay(1000, args.CancellationToken);
if (guardConfirmed) return;
// Refused: nothing is reported, and a box shown through the service would stay open.
args.Cancel = true;
guardRefused = true;
}
```
\n**BitModal**:
```razor
Last answer: @modalServiceResult
```
```csharp
[AutoInject] private BitModalService modalService { get; set; } = default!;
private BitMessageBoxResult modalServiceResult;
private async Task ShowMessageBox()
{
var modalRef = await modalService.ShowLast answer: @serviceResult
```
```csharp
[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!;
private BitMessageBoxResult serviceResult;
private async Task ShowMessageBoxService()
{
serviceResult = await messageBoxService.Show("TITLE", "BODY", BitMessageBoxButtons.OkCancel);
}
private async Task ShowInfoMessageBox()
{
serviceResult = await messageBoxService.ShowInfo("Information", "The export finished in 4 seconds.");
}
private async Task ShowSuccessMessageBox()
{
serviceResult = await messageBoxService.ShowSuccess("Success", "Your changes are saved.");
}
private async Task ShowWarningMessageBox()
{
serviceResult = await messageBoxService.ShowWarning("Warning", "This workspace is almost out of space.");
}
private async Task ShowSevereWarningMessageBox()
{
serviceResult = await messageBoxService.ShowSevereWarning("Severe warning", "This workspace is out of space.");
}
private async Task ShowErrorMessageBox()
{
serviceResult = await messageBoxService.ShowError("Error", "The file could not be uploaded.");
}
private async Task ShowTimedMessageBox()
{
// The token takes the box back off the screen; a cancelled showing answers None.
using var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
serviceResult = await messageBoxService.Show(new() { Title = "Saved", Body = "This closes itself in 5 seconds." }, cts.Token);
}
```
\n**Confirmation**:
```razor
Last answer: @(confirmResult?.ToString() ?? "-")
```
```csharp
[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!;
private bool? confirmResult;
private async Task ShowConfirm()
{
confirmResult = await messageBoxService.Confirm("Publish", "Publish these changes to production?");
}
private async Task ShowDangerousConfirm()
{
confirmResult = await messageBoxService.Confirm(new()
{
Title = "Delete the workspace?",
Body = "Everything in it is removed. This cannot be undone.",
Color = BitColor.Error,
Buttons = BitMessageBoxButtons.YesNo,
PrimaryButtonColor = BitColor.Error,
YesText = "Delete forever",
NoText = "Keep it",
DefaultButton = BitMessageBoxResult.No,
IconAriaLabel = "Error",
// A click beside the box does not dismiss it; Escape still does.
Modal = new() { Blocking = true }
});
}
```
\n**Prompt**:
```razor
Last answer: @(promptResult ?? "null")
```
```csharp
[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!;
private string? promptResult;
private async Task ShowPrompt()
{
promptResult = await messageBoxService.Prompt("Rename", "The new name of the file:", "report.pdf");
}
private async Task ShowValidatedPrompt()
{
promptResult = await messageBoxService.Prompt(new()
{
Title = "New folder",
Body = "Folders hold the files of a project.",
Label = "Name",
Description = "Up to 40 characters, no slashes.",
Placeholder = "Untitled folder",
AutoComplete = "off",
MaxLength = 40,
Required = true,
RequiredMessage = "Give the folder a name.",
Validator = v => v.IndexOfAny(['/', '\\']) >= 0 ? "A name cannot hold a slash." : null,
AsyncValidator = IsFolderNameTaken,
OkText = "Create"
});
}
// Stands in for a call to the server, which is the only one that knows the folders already there.
private static async Task