# SnackBar
**Also known as:** Toast
## Description
Snackbars provide brief notifications, also known as toasts. One host, placed once and captured by reference, shows every notification of the page: each Show call stacks an item in the chosen corner and returns the handle that closes, updates, pauses or resumes it. Items are announced through a live region, and their countdown holds while they are being read.
## 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. The default AriaLabel spells the shortcut out, and Escape on the region hands the focus back. 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), added on top of the safe-area inset of a phone. 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 | `BitPosition?` | null | The corner or edge of the screen the snack bars are stacked at (default is the bottom end). Start and End follow the reading direction; Left and Right stay on the same side of the screen in either. |
| 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 (assertively) and the rest as a status (politely); a role that is not a live one leaves the item unannounced. An alert item is rendered with the status role so it is not announced twice. |
| ServiceHost | `bool` | false | Makes this snack bar the one BitSnackBarService shows its notifications through, so any component can raise one by injecting the service. While several hosts are marked, the one rendered most recently takes the notifications. |
| ShowIcon | `bool` | false | Renders a leading icon in each snack bar item, chosen from its color unless one is provided: the glyphs a BitMessage of the same color carries (Completed for Success, Warning for Warning, WarningSolid for SevereWarning, ErrorBadge for Error, Info for the rest). |
| Size | `BitSize?` | null | The size of the snack bar items. An explicit value wins over the --bit-SnackBar-* size variables; left unset, the items are medium unless they say otherwise. |
| 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. Reduced motion collapses it unless ForceAnimation is set. |
| 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. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| 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 = null, string? cssClass = null, string? cssStyle = null, bool persistent = false, TimeSpan? autoDismissTime = null)` | | Shows a new snackbar. A color left out is no color at all: the item is Info unless the --bit-SnackBar-* color variables say otherwise, while one passed in (or the one Info, Success, Warning, SevereWarning and Error pass) wins over them. |
| 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. |
| Track | `Task<T> Track<T>(Task<T> task, string loadingTitle, Func<T, string> successTitle, Func<Exception, string> errorTitle, string? body = null)` | | Shows a loading snackbar for as long as a task runs, then turns it into a Success or Error one reporting how the task ended (the promise toast of the JavaScript libraries). Returns the task's result; a failure is rethrown after being reported, and a canceled task closes the item and rethrows too. |
| Track | `Task Track(Task task, string loadingTitle, string successTitle, Func<Exception, string> errorTitle, string? body = null)` | | The same as Track<T> for a task with no result. |
| 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. The element that had the focus gets it back on Escape, or when the last focused item leaves. |
| 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
### 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. |
### 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. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### 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 container of each snack bar item. |
| 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. |
| Spinner | `string?` | null | Custom CSS classes/styles for the spinner of a loading item 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. |
### BitSnackBarService Properties
Shows snack bar notifications from anywhere in the app through the BitSnackBar marked as ServiceHost. Registered by AddBitBlazorUIServices; also has the Info, Success, Warning, SevereWarning, Error and Show methods of the host.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| IsHostAvailable | `bool` | false | Whether a BitSnackBar marked as ServiceHost is rendered, so the notifications shown through the service reach the screen. Without one, a shown item comes back unshown and a warning is logged. |
| Host | `BitSnackBar?` | null | The snack bar the notifications are shown through, for everything it offers beyond the service (Items, Pause, Resume, FocusAsync). |
| Track | `Task<T> Track<T>(Task<T> task, ...) / Task Track(Task task, ...)` | | Shows a loading item through the current host while a task runs, then its Success or Error outcome. Without a host the task is still awaited and its result or exception still comes back. |
| Close | `Task Close(BitSnackBarItem item)` | | Closes an item through whichever host is showing it. |
| Update | `Task Update(BitSnackBarItem item)` | | Re-renders an item after its properties were changed, restarts its countdown and announces it again. |
| Clear | `Task Clear()` | | Closes every item of the current host and drops its queue. |
### 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. An explicit value wins over the --bit-SnackBar-* color variables; left unset, the item is Info unless they say otherwise. |
| 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. |
| IsLoading | `bool` | false | Marks the item as reporting work in progress: a spinner replaces its icon, it is marked aria-busy and it sits out the auto-dismiss countdown until an Update turns it off. It stays dismissible. |
| 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. |
## 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-SnackBar-z-index` | --bit-zin-snackbar | Stacking order of the stack, to keep it above or below the app's own overlays. |
| `--bit-SnackBar-offset` | 8px | Distance of the stack from the edges of the screen, on top of a phone's safe-area inset. The Offset parameter wins over it. |
| `--bit-SnackBar-gap` | 10px | Room between two stacked items. |
| `--bit-SnackBar-min-width` | none | Minimum width of an item, so short notifications line up. On a phone-sized screen (under 600px) it falls back to the stack's full width. |
| `--bit-SnackBar-max-width` | none | Maximum width of an item. The MaxWidth parameter wins over it. |
| `--bit-SnackBar-background` | --bit-clr-inf (Fill), --bit-clr-bg-pri (Outline, Text) | Fill of an item. The Color of the item wins over it in Fill; the page surface of Outline and Text is its alone. Shared by the three variants: --bit-SnackBar-fill-background, --bit-SnackBar-outline-background and --bit-SnackBar-text-background are read ahead of it. |
| `--bit-SnackBar-color` | --bit-clr-inf-text (Fill), --bit-clr-inf-fg (Outline, Text) | Text color of an item, which the icon, the dismiss button and the countdown bar follow. The Color of the item wins over it. Shared by the three variants: --bit-SnackBar-fill-color, --bit-SnackBar-outline-color and --bit-SnackBar-text-color are read ahead of it. |
| `--bit-SnackBar-border-color` | --bit-clr-inf, transparent (Text) | Border color of an item. The Color of the item wins over it, except over the transparent border of Text. Shared by the three variants: --bit-SnackBar-fill-border-color, --bit-SnackBar-outline-border-color and --bit-SnackBar-text-border-color are read ahead of it. |
| `--bit-SnackBar-border-width` | --bit-shp-brd-width on Outline, 0 otherwise | Border width of an item. Shared by the three variants: --bit-SnackBar-fill-border-width, --bit-SnackBar-outline-border-width and --bit-SnackBar-text-border-width are read ahead of it. |
| `--bit-SnackBar-fill-background` | --bit-SnackBar-background | Fill of an item of a Fill snack bar alone, read ahead of --bit-SnackBar-background so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-fill-color` | --bit-SnackBar-color | Text color of an item of a Fill snack bar alone, which the icon, the dismiss button and the countdown bar follow, read ahead of --bit-SnackBar-color so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-fill-border-color` | --bit-SnackBar-border-color | Border color of an item of a Fill snack bar alone, read ahead of --bit-SnackBar-border-color so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-fill-border-width` | --bit-SnackBar-border-width | Border width of an item of a Fill snack bar alone, read ahead of --bit-SnackBar-border-width so a theme can set this variant apart from the other two. |
| `--bit-SnackBar-outline-background` | --bit-SnackBar-background | Fill of an item of an Outline snack bar alone, read ahead of --bit-SnackBar-background so a theme can set this variant apart from the other two. The Color of the item leaves it alone. |
| `--bit-SnackBar-outline-color` | --bit-SnackBar-color | Text color of an item of an Outline snack bar alone, which the icon, the dismiss button and the countdown bar follow, read ahead of --bit-SnackBar-color so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-outline-border-color` | --bit-SnackBar-border-color | Border color of an item of an Outline snack bar alone, read ahead of --bit-SnackBar-border-color so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-outline-border-width` | --bit-SnackBar-border-width | Border width of an item of an Outline snack bar alone, read ahead of --bit-SnackBar-border-width so a theme can set this variant apart from the other two. |
| `--bit-SnackBar-text-background` | --bit-SnackBar-background | Fill of an item of a Text snack bar alone, read ahead of --bit-SnackBar-background so a theme can set this variant apart from the other two. The Color of the item leaves it alone. |
| `--bit-SnackBar-text-color` | --bit-SnackBar-color | Text color of an item of a Text snack bar alone, which the icon, the dismiss button and the countdown bar follow, read ahead of --bit-SnackBar-color so a theme can set this variant apart from the other two. The Color of the item wins over it. |
| `--bit-SnackBar-text-border-color` | --bit-SnackBar-border-color | Border color of an item of a Text snack bar alone, read ahead of --bit-SnackBar-border-color so a theme can set this variant apart from the other two. The Color of the item leaves it alone. |
| `--bit-SnackBar-text-border-width` | --bit-SnackBar-border-width | Border width of an item of a Text snack bar alone, read ahead of --bit-SnackBar-border-width so a theme can set this variant apart from the other two. |
| `--bit-SnackBar-radius` | --bit-shp-radius-popup | Corner radius of an item. |
| `--bit-SnackBar-shadow` | --bit-shd-snackbar | Elevation of an item. |
| `--bit-SnackBar-padding` | spacing(1.25) | Inner padding of an item. The Size parameter wins over it. |
| `--bit-SnackBar-title-font-size` | --bit-tpg-fs-md | Text size of the title. The Size parameter wins over it. |
| `--bit-SnackBar-title-font-weight` | --bit-tpg-fw-medium | Weight of the title. |
| `--bit-SnackBar-body-font-size` | --bit-tpg-fs-sm | Text size of the body. The Size parameter wins over it. |
| `--bit-SnackBar-icon-color` | The text color | Color of the leading icon and of the loading spinner. |
| `--bit-SnackBar-icon-size` | --bit-siz-icon-md | Size of the leading icon and of the loading spinner. The Size parameter wins over it. |
| `--bit-SnackBar-progress-color` | The text color | Color of the countdown bar. |
| `--bit-SnackBar-progress-height` | --bit-siz-track-md | Thickness of the countdown bar. |
## 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 & Transition**:
```razor
Open SnackBar
```
```csharp
private string offset = "8px";
private int transitionDuration = 200;
private BitSnackBar positionRef = default!;
private BitPosition position = BitPosition.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
Per-item dismiss time
```
```csharp
private bool hideProgress;
private bool reverseProgress;
private BitSnackBar autoDismissRef = default!;
private async Task OpenAutoDismiss()
{
await autoDismissRef.Info("Dismissing in 5 seconds", "Hover over me and the countdown holds.");
}
private async Task OpenPerItemTime()
{
await autoDismissRef.Show("Quick one", "This item lives for 2 seconds.", autoDismissTime: TimeSpan.FromSeconds(2));
await autoDismissRef.Show("Slow one", "This item takes the host's 5 seconds.", BitColor.Success);
}
```
\n**Persistent**:
```razor
Open SnackBar
Close SnackBar
Open one of each
```
```csharp
private BitSnackBarItem? persistentItem;
private BitSnackBar persistentRef = 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", "Dismissed after 5 seconds, or by its button.");
await perItemPersistentRef.Show(new BitSnackBarItem
{
Title = "No button",
Body = "Still counts down and still answers Escape.",
Color = BitColor.Success,
HideDismiss = true
});
await perItemPersistentRef.Show(new BitSnackBarItem
{
Title = "Stays put",
Body = "Persistent: no button and no countdown.",
Color = BitColor.Warning,
Persistent = true
});
}
```
\n**Swipe to dismiss**:
```razor
Open, then drag it sideways
Show (max 3)
Show a duplicate
Info
Success
Error
Per-item icon
Host-wide icon
```
```csharp
private BitSnackBar iconRef = default!;
private BitSnackBar customIconRef = 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 OpenPerItemIcon()
{
await iconRef.Show(new BitSnackBarItem
{
Title = "Deployed",
Body = "This one item asked for the Rocket icon.",
Color = BitColor.Success,
IconName = BitIconName.Rocket
});
await iconRef.Show(new BitSnackBarItem
{
Title = "No icon",
Body = "And this one dropped its icon.",
Color = BitColor.Info,
HideIcon = true
});
}
private async Task OpenCustomIcon()
{
await customIconRef.Info("Reminder", "Every item of this host uses the Ringer icon.");
}
```
\n**Actions**:
```razor
Undo
Delete item
Show a long message
```
```csharp
private bool multiline;
private string maxWidth = "20rem";
private BitSnackBar multilineRef = default!;
private async Task OpenMultiline()
{
await multilineRef.Info("A title that is also too long to fit on one line",
"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.");
}
```
\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
Track a task
Track a failing task
Pause
Resume
Clear all
ExportAsync()
{
await Task.Delay(2000);
return 1250;
}
private static async Task FailingExportAsync()
{
await Task.Delay(2000);
throw new InvalidOperationException("the disk is full");
}
private async Task PauseAll()
{
foreach (var item in controlRef.Items)
{
await controlRef.Pause(item);
}
}
private async Task ResumeAll()
{
foreach (var item in controlRef.Items)
{
await controlRef.Resume(item);
}
}
private async Task ClearAll() => await controlRef.Clear();
```
\n**Service**:
```razor
Save
Fail
```
```csharp
// Program.cs: builder.Services.AddBitBlazorUIServices();
[Inject] private BitSnackBarService snackBarService { get; set; } = default!;
private async Task SaveThroughService()
{
await snackBarService.Success("Saved", "Shown from a component that has no reference to the host.");
}
private async Task FailThroughService()
{
await snackBarService.Error("Save failed", "The same service reports problems too.");
}
```
\n**Accessibility**:
```razor
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**Cascading parameters**:
```razor
Takes the position, icon and lifetime from the cascade
Its own position, the cascaded rest
Outside the cascade, back to the defaults
```
```csharp
private readonly BitSnackBarParams[] snackBarParams =
[
new()
{
Position = BitPosition.TopCenter,
ShowIcon = true,
AutoDismiss = true,
AutoDismissTime = TimeSpan.FromSeconds(4),
}
];
private BitSnackBar cascadedRef = default!;
private BitSnackBar cascadedOwnRef = default!;
private BitSnackBar uncascadedRef = default!;
private async Task OpenCascaded() => await cascadedRef.Success("Cascaded", "Top center, with an icon, for 4 seconds.");
private async Task OpenCascadedOwn() => await cascadedOwnRef.Success("Own position", "Bottom center, the rest from the cascade.");
private async Task OpenUncascaded() => await uncascadedRef.Success("Defaults", "Bottom end, no icon, until dismissed.");
```
\n**Color**:
```razor
Info
Success
Warning
SevereWarning
Error
Primary
Secondary
Tertiary
```
```csharp
private BitSnackBar colorRef = default!;
private BitVariant colorVariant = BitVariant.Fill;
```
\n**External Icons**:
```razor
FontAwesome
Bootstrap
CSS classes
```
```csharp
private BitSnackBar iconFaRef = default!;
private BitSnackBar iconBiRef = default!;
private BitSnackBar iconCssRef = default!;
private async Task OpenIconFa() => await iconFaRef.Info("FontAwesome", "Both icons come from FontAwesome.");
private async Task OpenIconBi() => await iconBiRef.Info("Bootstrap", "Both icons come from Bootstrap Icons.");
private async Task OpenIconCss() => await iconCssRef.Info("CSS classes", "Icons from plain CSS class names.");
```
\n**Size**:
```razor
Open SnackBar
```
```csharp
private BitSnackBar sizeRef = default!;
private BitSize size = BitSize.Medium;
private async Task OpenSize() => await sizeRef.Info($"{size}", $"The {size.ToString().ToLowerInvariant()} size snack bar.");
```
\n**Style & Class**:
```razor
Item style
Item class
Styles
Classes
CSS variables
```
```csharp
private BitSnackBar snackBarStyleRef = default!;
private BitSnackBar snackBarStylesRef = default!;
private BitSnackBar snackBarClassesRef = default!;
private BitSnackBar cssVarsRef = 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 snackBarStyleRef.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");
}
private async Task OpenCssVars()
{
await cssVarsRef.Show("Restyled", "Background, text, icon, bar, radius, padding and width from CSS variables.");
}
```
\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 & MaxWidth**:
```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,
IsLoading = true
});
}
private async Task CompleteUpload()
{
if (uploadItem is null) return;
uploadItem.Title = "Upload complete";
uploadItem.Color = BitColor.Success;
uploadItem.IsLoading = false;
await controlRef.Update(uploadItem);
uploadItem = null;
}
private async Task TrackExport()
{
await controlRef.Track(ExportAsync(), "Exporting...", rows => $"Exported {rows} rows", ex => "Export failed", "orders.csv");
}
private async Task TrackFailingExport()
{
try
{
await controlRef.Track(FailingExportAsync(), "Exporting...", "Exported", ex => $"Export failed: {ex.Message}", "orders.csv");
}
catch (InvalidOperationException)
{
// Already reported on screen; the failure is still the caller's to handle.
}
}
private static async Task