# SnackBar
**Also known as:** Toast
## Description
Snackbars provide brief notifications. The component is also known as a toast. One host, placed once in the layout and captured by reference, shows every notification of the page: each Show call stacks a new item in the chosen corner and hands back the handle to close, update, pause or resume it. Items carry their own color, icon, lifetime, actions and content; each is announced through a live region the host has kept in the page from its first render, with the politeness its color implies; the auto-dismiss countdown holds while the pointer or the keyboard focus is inside an item; and a cap on how many fit at once decides whether the extras wait their turn, replace the oldest, or are dropped.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ActionsTemplate | `RenderFragment<BitSnackBarItem>?` | null | The content of the action area of every snack bar item, rendered under its body. An item that carries its own Actions renders that instead. |
| AutoDismiss | `bool` | false | Whether or not automatically dismiss the snack bar. The countdown of an item is paused while the pointer or the keyboard focus is inside it, and a persistent item never takes part in it at all. |
| AutoDismissTime | `TimeSpan?` | null | How long does it take to automatically dismiss the snack bar (default is 3 seconds). A single item can ask for a lifetime of its own through BitSnackBarItem.AutoDismissTime, and a value of zero or less turns the countdown off. |
| BodyTemplate | `RenderFragment<string>?` | null | Used to customize how the content inside the body is rendered. |
| Classes | `BitSnackBarClassStyles?` | null | Custom CSS classes for different parts of the snack bar. |
| ClearOnNavigation | `bool` | false | Closes every snack bar item as soon as the app navigates somewhere else, so a notification about the page it was raised on does not outlive that page. |
| DismissAriaLabel | `string?` | null | The accessible label of the dismiss button (default is "Close"). The button holds nothing but an icon, so without a label of its own a screen reader has nothing to announce it by. |
| DismissIcon | `BitIconInfo?` | null | Gets or sets the icon of the dismiss button using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set. |
| DismissIconName | `string?` | null | The icon name of the dismiss button from the built-in Fluent UI icons. If unset, default will be the Fluent UI Cancel icon. |
| DismissOnClick | `bool` | false | Dismisses a snack bar item when anywhere inside it is clicked. Leave this off while the item holds interactive content the user is still filling in. |
| HideDismiss | `bool` | false | Prevents rendering the dismiss button of every snack bar item. Unlike Persistent this only takes the button away: the items still count down, still answer the Escape key and still take part in DismissOnClick. |
| HideProgress | `bool` | false | Prevents rendering the countdown progress bar of the auto-dismissing snack bars. |
| Hotkey | `string[]?` | null | The keyboard shortcut that moves the focus to the snack bar region, as a list of KeyboardEvent.code values (the modifiers written as their property names, so ["KeyT", "altKey"] is Alt+T). A notification is at the end of the document and takes itself away again, so this is what makes the actions inside one operable from the keyboard at all. Off unless a shortcut is given; needs the bit BlazorUI script to be on the page. |
| Icon | `BitIconInfo?` | null | The leading icon of every snack bar item using custom CSS classes for external icon libraries. Only rendered while ShowIcon is enabled, and takes precedence over IconName when both are set. |
| IconName | `string?` | null | The name of the leading icon of every snack bar item from the built-in Fluent UI icons. Only rendered while ShowIcon is enabled. If unset, the icon of each item is selected automatically based on its color. |
| MaxItems | `int?` | null | The maximum number of snack bar items to show at once, so a burst of notifications cannot grow into a wall that covers the page. What happens to the item that does not fit is up to OverflowBehavior. Unset (or zero and below) means no cap. |
| MaxWidth | `string?` | null | The maximum width of the snack bar items. Any CSS length is accepted, and the stack never grows past the width of the screen whatever this says. Unset, an item is as wide as its longest line needs. |
| Multiline | `bool` | false | Enables the multiline mode of both title and body. A single-line title or body that does not fit is cut off with an ellipsis and keeps its full text in a tooltip. |
| NewestOnTop | `bool` | false | Puts the newest snack bar item at the top of the stack instead of the bottom. |
| Offset | `string?` | null | The distance of the stack from the edges of the screen (default is 8px). Any CSS length is accepted, which is how a snack bar is kept clear of the chrome the app already has at that edge. |
| OnDismiss | `EventCallback<BitSnackBarItem>` | | Callback for when any snack bar is dismissed, reporting the item that was dismissed. Its DismissReason tells what took it away. |
| OnItemClick | `EventCallback<BitSnackBarItem>` | | Callback for when any snack bar item is clicked. |
| OnShow | `EventCallback<BitSnackBarItem>` | | Callback for when a new snack bar item is shown. An item held back by the Queue overflow behavior reports this when it reaches the screen rather than when it was handed to Show. |
| OverflowBehavior | `BitSnackBarOverflowBehavior` | BitSnackBarOverflowBehavior.DismissOldest | What happens to a new snack bar item that arrives while MaxItems is already reached: the oldest one is dismissed to make room for it, the new one is held back until a slot frees up, or the new one is dropped. |
| PauseOnHover | `bool` | true | Pauses the auto-dismiss countdown while the pointer or the keyboard focus is inside a snack bar item. This is how the countdown meets WCAG 2.2.1 (Timing Adjustable) without a longer timeout. |
| PauseOnPageHidden | `bool` | false | Pauses the auto-dismiss countdown of every snack bar item while the page is hidden, so a notification is not spent in a background tab. Needs the bit BlazorUI services to be registered (AddBitBlazorUIServices). |
| PauseOnWindowBlur | `bool` | false | Pauses the auto-dismiss countdown of every snack bar item while the window does not have the focus. A window that another one is covering is not hidden, so PauseOnPageHidden alone lets a notification count down behind whatever is in front of it. Needs the bit BlazorUI services to be registered (AddBitBlazorUIServices). |
| Persistent | `bool` | false | Makes the snack bar non-dismissible in UI and removes the dismiss button. A persistent snack bar also opts out of the auto-dismiss countdown and of the Escape key. To take the button away without also taking the countdown away, use HideDismiss instead. |
| Position | `BitSnackBarPosition?` | null | The position of the snack bars to show (default is bottom right). |
| PreventDuplicates | `bool` | false | Skips showing a new snack bar while an identical one (same title, body and color) is already on screen, returning the one that is already showing instead and starting its countdown over. |
| ReverseProgress | `bool` | false | Draws the countdown progress bar depleting from full to empty instead of filling from empty to full, so it reads as the time the notification has left rather than as how far it has got through its lifetime. |
| Role | `string?` | null | A custom ARIA role for every snack bar item, overriding the one its color implies. By default the colors that report a problem are announced as an alert and the rest as a status, and a role that is not a live one leaves the item unannounced. |
| ShowIcon | `bool` | false | Renders a leading icon in each snack bar item, chosen from its color unless one is provided. |
| Size | `BitSize?` | null | The size of the snack bar items. |
| Styles | `BitSnackBarClassStyles?` | null | Custom CSS styles for different parts of the snack bar. |
| SwipeToDismiss | `bool` | false | Lets a snack bar item be dragged out of the way with the pointer, in either inline direction, which is how a notification is thrown away on a touch screen. A persistent item is not swipeable. Needs the bit BlazorUI script to be on the page. |
| SwipeThreshold | `int` | 50 | How far a snack bar item has to be dragged before it is dismissed, in pixels. Only in effect while SwipeToDismiss is enabled; a drag that stops short of this springs the item back where it was. |
| Template | `RenderFragment<BitSnackBarItem>?` | null | Used to fully customize how a snack bar item is rendered, taking the place of its header, body and actions. The countdown progress bar is still rendered under the template. |
| TitleTemplate | `RenderFragment<string>?` | null | Used to customize how content inside the title is rendered. |
| TransitionDuration | `int` | 200 | The duration in milliseconds of the enter and exit animations of the snack bar items. A dismissed item is kept in the DOM for this long so its exit animation can play. Set it to zero to remove the item at once. |
| Variant | `BitVariant?` | null | The visual variant of the snack bar items. |
| 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. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Items | `IReadOnlyList<BitSnackBarItem>` | [] | The snack bar items that are currently showing, oldest first (or newest first with NewestOnTop). |
| PendingItems | `IReadOnlyList<BitSnackBarItem>` | [] | The snack bar items that are waiting for a slot under the Queue overflow behavior, in the order they will be shown. |
| Info | `Task<BitSnackBarItem> Info(string title, string? body = "", bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar with Info color. |
| Success | `Task<BitSnackBarItem> Success(string title, string? body = "", bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar with Success color. |
| Warning | `Task<BitSnackBarItem> Warning(string title, string? body = "", bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar with Warning color. |
| SevereWarning | `Task<BitSnackBarItem> SevereWarning(string title, string? body = "", bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar with SevereWarning color. |
| Error | `Task<BitSnackBarItem> Error(string title, string? body = "", bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar with Error color. |
| Show | `Task<BitSnackBarItem> Show(string title, string? body = "", BitColor color = BitColor.Info, string? cssClass = null, string? cssStyle = null, bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar. |
| Show | `Task<BitSnackBarItem> Show(BitSnackBarItem item)` | | Shows a new snackbar. Showing an item that is already showing (or already waiting in the queue) is a no-op that returns it unchanged, and so is showing a duplicate of one while PreventDuplicates is enabled - in which case the item that is already showing comes back instead, with its countdown started over. An item that does not fit under MaxItems is dealt with by OverflowBehavior. |
| Close | `Task Close(BitSnackBarItem item)` | | Closes a snackbar item. The returned task completes once the item has left the DOM, which is after its exit animation has played. An item that is still waiting in the queue is taken out of it instead. |
| Clear | `Task Clear()` | | Closes every snackbar item that is currently showing, and drops everything that was waiting in the queue. |
| Update | `Task Update(BitSnackBarItem item)` | | Re-renders a snackbar item after its properties were changed, restarts its auto-dismiss countdown and announces its new text again. This is how a notification is turned into the report of what it was waiting for. |
| FocusAsync | `ValueTask FocusAsync()` | | Moves the keyboard focus to the snack bar region, which is what puts the next Tab inside the notifications. This is what Hotkey does, offered on its own for an app with a shortcut registry of its own. |
| Pause | `Task Pause(BitSnackBarItem item)` | | Pauses the auto-dismiss countdown of a snackbar item. This is a hold of its own rather than the same one the pointer takes, so it is not let go again by the pointer happening to leave the item - only Resume releases it. |
| Resume | `Task Resume(BitSnackBarItem item)` | | Resumes the auto-dismiss countdown of a snackbar item that was paused. A countdown is held back for as long as any one reason to hold it back stands, so this does nothing while the pointer or the keyboard focus is still inside the item or the page is still hidden. |
| 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
### BitSnackBarPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| TopStart | 0 | Top of the screen, at the inline start. |
| TopCenter | 1 | Top of the screen, centered. |
| TopEnd | 2 | Top of the screen, at the inline end. |
| BottomStart | 3 | Bottom of the screen, at the inline start. |
| BottomCenter | 4 | Bottom of the screen, centered. |
| BottomEnd | 5 | Bottom of the screen, at the inline end (the default). |
### BitSnackBarOverflowBehavior Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| DismissOldest | 0 | Dismisses the oldest item on screen to make room for the new one. This is the default. |
| Queue | 1 | Holds the new item back until a slot frees up, then shows it in the order it arrived. |
| Skip | 2 | Drops the new item, leaving what is already on screen untouched. |
### BitSnackBarDismissReason Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Programmatic | 0 | The code that opened the item closed it through Close. |
| DismissButton | 1 | The user pressed the dismiss button of the item. |
| Escape | 2 | The user pressed the Escape key while the focus was inside the item. |
| Click | 3 | The user clicked the item while DismissOnClick was enabled. |
| Swipe | 4 | The user swiped the item away while SwipeToDismiss was enabled. |
| Timeout | 5 | The auto-dismiss countdown of the item ran out. |
| Overflow | 6 | The item was taken away to make room for a newer one under MaxItems. |
| Clear | 7 | The host was emptied through Clear. |
### 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. |
### BitVariant Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size snack bar. |
| Medium | 1 | The medium size snack bar (the default). |
| Large | 2 | The large size snack bar. |
### 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
### 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. |
### BitSnackBarClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitSnackBar. |
| Container | `string?` | null | Custom CSS classes/styles for the main container of the BitSnackBar. |
| Header | `string?` | null | Custom CSS classes/styles for the header of the BitSnackBar. |
| IconContainer | `string?` | null | Custom CSS classes/styles for the icon container of the BitSnackBar. |
| Icon | `string?` | null | Custom CSS classes/styles for the leading icon of the BitSnackBar. |
| DismissButton | `string?` | null | Custom CSS classes/styles for the dismiss button of the BitSnackBar. |
| DismissIcon | `string?` | null | Custom CSS classes/styles for the dismiss icon of the BitSnackBar. |
| Title | `string?` | null | Custom CSS classes/styles for the title of the BitSnackBar. |
| Body | `string?` | null | Custom CSS classes/styles for the body of the BitSnackBar. |
| Actions | `string?` | null | Custom CSS classes/styles for the action area of the BitSnackBar. |
| ProgressBar | `string?` | null | Custom CSS classes/styles for the progress bar of the BitSnackBar. |
### BitSnackBarItem Properties
A class to represent each snack bar item. It is handed to Show and stays the handle of the snack bar it opened, which Close, Update, Pause and Resume take and which OnDismiss reports back. Every member overrides the matching parameter of the host for this one item only.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Id | `Guid` | Guid.NewGuid() | The unique identifier of the snack bar item. |
| Actions | `RenderFragment?` | null | The content of the action area of this snack bar item, rendered under its body, taking the place of the host's ActionsTemplate. |
| AnnounceText | `string?` | null | What a screen reader is told when this item arrives, instead of its title and body. An empty string leaves the item unannounced. |
| AutoDismissTime | `TimeSpan?` | null | How long it takes to automatically dismiss this specific snack bar item, overriding the AutoDismissTime of the host. |
| Body | `string?` | null | The body text of the snack bar item. |
| Color | `BitColor?` | null | The color theme of the snack bar item, which also decides its default icon and the politeness of its live region. |
| CssClass | `string?` | null | Custom CSS class to apply to the snack bar item. |
| CssStyle | `string?` | null | Custom CSS style to apply to the snack bar item. |
| Data | `object?` | null | An arbitrary payload to carry along with the snack bar item. Nothing in the component reads it; it is a place to keep whatever the callbacks of the item need. |
| DuplicateCount | `int` | 0 | How many further times this notification was raised while it was already on screen, counted by PreventDuplicates. Zero for an item that was raised once, and reset each time the item is shown afresh. |
| DismissReason | `BitSnackBarDismissReason?` | null | What took this item off the screen, set by the host just before the dismiss callbacks run. Null until the item has been dismissed. |
| HideDismiss | `bool` | false | Prevents rendering the dismiss button of this specific item, without taking its countdown, its answer to Escape or its part in DismissOnClick away. |
| HideIcon | `bool` | false | Prevents rendering the leading icon of this specific snack bar item. |
| Icon | `BitIconInfo?` | null | The leading icon of this snack bar item using custom CSS classes for external icon libraries. |
| IconName | `string?` | null | The name of the leading icon of this snack bar item from the built-in Fluent UI icons. |
| OnClick | `Func<BitSnackBarItem, Task>?` | null | A callback that is invoked when this snack bar item is clicked, before the host's OnItemClick. |
| OnDismiss | `Func<BitSnackBarItem, Task>?` | null | A callback that is invoked when this snack bar item is dismissed, before the host's OnDismiss. |
| Persistent | `bool` | false | Makes this specific snack bar item non-dismissible and removes its dismiss button, which also opts it out of the auto-dismiss countdown. |
| Role | `string?` | null | A custom ARIA role for this snack bar item, overriding the one its color implies. |
| Title | `string` | null | The title text of the snack bar item. |
## Examples
\n**Basic**:
```razor
Open SnackBar
```
```csharp
private BitSnackBar basicRef = default!;
private async Task OpenBasicSnackBar()
{
await basicRef.Info("This is title", "This is body");
}
```
\n**Position & Offset**:
```razor
Open SnackBar
```
```csharp
private string offset = "8px";
private BitSnackBar positionRef = default!;
private BitSnackBarPosition position = BitSnackBarPosition.BottomEnd;
private async Task OpenPositionSnackBar()
{
await positionRef.Info($"{position}", $"Pinned to the selected position, {offset} from the edges.");
}
```
\n**Auto dismiss**:
```razor
Hover me to pause the countdown
Draining progress bar
No progress bar
Per-item dismiss time
```
```csharp
private BitSnackBar autoDismissRef = default!;
private BitSnackBar noProgressRef = default!;
private BitSnackBar perItemTimeRef = default!;
private BitSnackBar reverseProgressRef = default!;
private async Task OpenAutoDismiss()
{
await autoDismissRef.Info("Dismissing in 5 seconds", "Hover over me and the countdown holds.");
}
private async Task OpenReverseProgress()
{
await reverseProgressRef.Info("Dismissing in 5 seconds", "The bar drains as the time runs out.");
}
private async Task OpenNoProgress()
{
await noProgressRef.Info("Dismissing in 5 seconds", "The countdown runs without a progress bar.");
}
private async Task OpenPerItemTime()
{
await perItemTimeRef.Show("Quick one", "This item lives for 2 seconds.", autoDismissTime: TimeSpan.FromSeconds(2));
await perItemTimeRef.Show("Slow one", "This item takes the host's 10 seconds.", BitColor.Success);
}
```
\n**Persistent**:
```razor
Open SnackBar
Close SnackBar
Open one of each
No dismiss button
```
```csharp
private BitSnackBarItem? persistentItem;
private BitSnackBar persistentRef = default!;
private BitSnackBar hideDismissRef = default!;
private BitSnackBar perItemPersistentRef = default!;
private async Task OpenPersistentSnackBar()
{
await ClosePersistentSnackBar();
persistentItem = await persistentRef.Info("This is persistent title", "This is persistent body");
}
private async Task ClosePersistentSnackBar()
{
if (persistentItem is not null)
{
await persistentRef.Close(persistentItem);
persistentItem = null;
}
}
private async Task OpenMixedPersistence()
{
await perItemPersistentRef.Info("Goes away", "This one is dismissed after 3 seconds.");
await perItemPersistentRef.Show(new BitSnackBarItem
{
Title = "Stays put",
Body = "This one is persistent, so it has no dismiss button and no countdown.",
Color = BitColor.Warning,
Persistent = true
});
}
private async Task OpenHideDismiss()
{
await hideDismissRef.Info("No way out but the clock", "This item has no dismiss button, but it still counts down.");
}
```
\n**Swipe to dismiss**:
```razor
Open, then drag it sideways
Show (max 3)
Show a duplicate
Info
Success
Error
Custom icon
Per-item icon
```
```csharp
private BitSnackBar iconRef = default!;
private BitSnackBar customIconRef = default!;
private BitSnackBar perItemIconRef = default!;
private async Task OpenIconInfo() => await iconRef.Info("Info", "The icon follows the color of the item.");
private async Task OpenIconSuccess() => await iconRef.Success("Success", "The icon follows the color of the item.");
private async Task OpenIconError() => await iconRef.Error("Error", "The icon follows the color of the item.");
private async Task OpenCustomIcon()
{
await customIconRef.Info("Reminder", "Every item of this host uses the Ringer icon.");
}
private async Task OpenPerItemIcon()
{
await perItemIconRef.Show(new BitSnackBarItem
{
Title = "Deployed",
Body = "This one item asked for the Rocket icon.",
Color = BitColor.Success,
IconName = BitIconName.Rocket
});
await perItemIconRef.Show(new BitSnackBarItem
{
Title = "No icon",
Body = "And this one dropped its icon.",
Color = BitColor.Info,
HideIcon = true
});
}
```
\n**Actions**:
```razor
Undo
Delete item
Uncapped
Single line, capped at 20rem
Multiline, capped at 20rem
```
```csharp
private BitSnackBar uncappedRef = default!;
private BitSnackBar singleLineRef = default!;
private BitSnackBar multilineRef = default!;
private const string LongTitle = "A title that is also too long to fit on one line";
private const string LongBody = "This body is long enough that it does not fit on a single line, so it is either cut off with an ellipsis or wrapped over as many lines as it needs.";
private async Task OpenUncapped() => await uncappedRef.Info(LongTitle, LongBody);
private async Task OpenSingleLine() => await singleLineRef.Info(LongTitle, LongBody);
private async Task OpenMultiline() => await multilineRef.Info(LongTitle, LongBody);
```
\n**Templates**:
```razor
Title template
Body template
Item template
```
```csharp
private string? bodyTemplateAnswer;
private BitSnackBar bodyTemplateRef = default!;
private BitSnackBar titleTemplateRef = default!;
private BitSnackBar fullTemplateRef = default!;
private async Task OpenTitleTemplate()
{
await titleTemplateRef.Warning("This is title", "This is body");
}
private async Task OpenBodyTemplate()
{
bodyTemplateAnswer = null;
await bodyTemplateRef.Error("This is title", "This is body");
}
private async Task OpenFullTemplate()
{
await fullTemplateRef.Show("Alice Johnson", "sent you a message", BitColor.Primary);
}
```
\n**Events**:
```razor
Open SnackBar
eventLogs = [];
private void Log(string message)
{
eventLogs.Insert(0, message);
if (eventLogs.Count > 5) eventLogs.RemoveAt(eventLogs.Count - 1);
}
private void HandleOnShow(BitSnackBarItem item) => Log($"OnShow: {item.Title}");
private void HandleOnDismiss(BitSnackBarItem item) => Log($"OnDismiss: {item.Title} ({item.DismissReason})");
private void HandleOnItemClick(BitSnackBarItem item) => Log($"OnItemClick: {item.Title}");
private async Task OpenEvents()
{
await eventsRef.Info($"Notification {eventLogs.Count + 1}", "Click me, close me or wait - the reason is reported.");
}
```
\n**Programmatic control**:
```razor
Start upload
Complete upload
Pause
Resume
Clear all
Polite (status)
Assertive (alert)
Custom announcement
Unannounced
Got it
Open, then press F8
Focus the region from code
```
```csharp
private BitSnackBar a11yRef = default!;
private async Task OpenPoliteA11y()
{
await a11yRef.Success("Saved", "A screen reader hears this at the next pause in what it is saying.");
}
private async Task OpenAssertiveA11y()
{
await a11yRef.Error("Save failed", "A problem interrupts the screen reader instead of waiting.");
}
private async Task OpenAnnounceText()
{
await a11yRef.Show(new BitSnackBarItem
{
Title = "ETA 5m",
Body = "Sync in progress.",
Color = BitColor.Info,
AnnounceText = "Estimated time of arrival: five minutes. Sync in progress."
});
}
private async Task OpenSilentA11y()
{
await a11yRef.Show(new BitSnackBarItem
{
Title = "Seen but not heard",
Body = "A role that is not a live one leaves the item unannounced.",
Color = BitColor.Warning,
Role = "presentation"
});
}
private BitSnackBar hotkeyRef = default!;
private async Task OpenHotkey()
{
await hotkeyRef.Info("Report ready", "Press F8 to jump here, then Tab to the action.");
}
private async Task FocusSnackBars() => await hotkeyRef.FocusAsync();
```
\n**Customization**:
```razor
Show
Info
Success
Warning
SevereWarning
Error
Primary
Secondary
Tertiary
```
```csharp
private BitSnackBar colorRef = default!;
private BitVariant colorVariant = BitVariant.Fill;
```
\n**External Icons**:
```razor
FontAwesome dismiss icon
CSS classes dismiss icon
FontAwesome leading icon
Bootstrap dismiss icon
Implicit CSS dismiss icon
```
```csharp
private BitSnackBar dismissIconFaRef = default!;
private BitSnackBar dismissIconCssRef = default!;
private BitSnackBar leadingIconFaRef = default!;
private BitSnackBar dismissIconBiRef = default!;
private BitSnackBar dismissIconImplicitRef = default!;
private async Task OpenDismissIconFa()
{
await dismissIconFaRef.Info("Notification", "Click the FontAwesome dismiss icon to close.");
}
private async Task OpenDismissIconCss()
{
await dismissIconCssRef.Info("Notification", "Click the CSS class dismiss icon to close.");
}
private async Task OpenLeadingIconFa()
{
await leadingIconFaRef.Info("Notification", "The leading icon comes from FontAwesome.");
}
private async Task OpenDismissIconBi()
{
await dismissIconBiRef.Info("Notification", "Click the Bootstrap dismiss icon to close.");
}
private async Task OpenDismissIconImplicit()
{
await dismissIconImplicitRef.Info("Notification", "Click the implicit CSS dismiss icon to close.");
}
```
\n**Size**:
```razor
Small
Medium
Large
```
```csharp
private BitSnackBar sizeSmallRef = default!;
private BitSnackBar sizeMediumRef = default!;
private BitSnackBar sizeLargeRef = default!;
private async Task OpenSizeSmall() => await sizeSmallRef.Info("Small", "The small size snack bar.");
private async Task OpenSizeMedium() => await sizeMediumRef.Info("Medium", "The medium size snack bar.");
private async Task OpenSizeLarge() => await sizeLargeRef.Info("Large", "The large size snack bar.");
```
\n**Style & Class**:
```razor
Custom style
Custom class
Custom styles
Custom classes
```
```csharp
private BitSnackBar snackBarStyleRef = default!;
private BitSnackBar snackBarClassRef = default!;
private BitSnackBar snackBarStylesRef = default!;
private BitSnackBar snackBarClassesRef = default!;
private async Task OpenSnackBarStyle()
{
await snackBarStyleRef.Show("This is title", "This is body", cssStyle: "background-color: dodgerblue; border-radius: 0.5rem;");
}
private async Task OpenSnackBarClass()
{
await snackBarClassRef.Show("This is title", "This is body", cssClass: "custom-class");
}
private async Task OpenSnackBarStyles()
{
await snackBarStylesRef.Show("This is title", "This is body");
}
private async Task OpenSnackBarClasses()
{
await snackBarClassesRef.Show("This is title", "This is body");
}
```
\n**RTL**:
```razor
نمایش پیام
```
```csharp
private BitSnackBar rtlRef = default!;
private async Task OpenRtl()
{
await rtlRef.Success("عنوان پیام", "این متن پیام است.");
}
```
Last dismissal: @swipeResult
```
```csharp
private string? swipeResult;
private BitSnackBar swipeRef = default!;
private async Task OpenSwipe()
{
await swipeRef.Info("Drag me away", "A drag of 60 pixels or more takes this off the screen.");
}
private void HandleSwipeDismiss(BitSnackBarItem item)
{
swipeResult = $"{item.Title} ({item.DismissReason})";
StateHasChanged();
}
```
\n**Stacking**:
```razor
Showing: @stackingRef?.Items.Count
Waiting: @stackingRef?.PendingItems.Count
Repeats suppressed: @duplicateItem?.DuplicateCount
```
```csharp
private int stackingCounter;
private bool newestOnTop;
private bool preventDuplicates;
private BitSnackBar stackingRef = default!;
private BitSnackBarItem? duplicateItem;
private BitSnackBarOverflowBehavior overflowBehavior;
private void HandleStackingChange(BitSnackBarItem item) => StateHasChanged();
private async Task OpenStacking()
{
stackingCounter++;
await stackingRef.Info($"Notification {stackingCounter}", "Only three of these fit at a time.");
}
private async Task OpenDuplicate()
{
duplicateItem = await stackingRef.Info("Duplicate", "Showing this twice only adds one while PreventDuplicates is on.");
}
```
\n**Icon**:
```razor
Last action: @actionResult
```
```csharp
private string actionResult = "-";
private BitSnackBar actionsRef = default!;
private async Task OpenActions()
{
actionResult = "-";
await actionsRef.Warning("Item deleted", "The item was moved to the recycle bin.");
}
private async Task Undo(BitSnackBarItem item)
{
actionResult = $"Undone: {item.Title}";
await actionsRef.Close(item);
}
```
\n**Multiline**:
```razor
@title
@body
Yes
No
Answer: @bodyTemplateAnswer
-
@foreach (var log in eventLogs)
{
- @log }
Showing: @controlRef?.Items.Count
```
```csharp
private BitSnackBarItem? uploadItem;
private BitSnackBar controlRef = default!;
private void HandleControlChange(BitSnackBarItem item) => StateHasChanged();
private async Task StartUpload()
{
uploadItem = await controlRef.Show(new BitSnackBarItem
{
Title = "Uploading...",
Body = "report.pdf",
Color = BitColor.Info,
Persistent = true
});
}
private async Task CompleteUpload()
{
if (uploadItem is null) return;
uploadItem.Title = "Upload complete";
uploadItem.Color = BitColor.Success;
uploadItem.Persistent = false;
await controlRef.Update(uploadItem);
uploadItem = null;
}
private async Task PauseAll()
{
foreach (var item in controlRef.Items.ToArray())
{
await controlRef.Pause(item);
}
}
private async Task ResumeAll()
{
foreach (var item in controlRef.Items.ToArray())
{
await controlRef.Resume(item);
}
}
private async Task ClearAll() => await controlRef.Clear();
```
\n**Accessibility**:
```razor