Notifications

SnackBar

Bit.BlazorUIToast

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.

ForceAnimation (whole page)

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitSnackBar CSS variables

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	Per Color and Variant	Fill of an item.
--bit-SnackBar-color	Per Color and Variant	Text color of an item, which the icon, the dismiss button and the countdown bar follow.
--bit-SnackBar-border-color	Per Color and Variant	Border color of an item.
--bit-SnackBar-border-width	--bit-shp-brd-width on Outline, 0 otherwise	Border width of an item.
--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	Per Size	Inner padding of an item.
--bit-SnackBar-title-font-size	Per Size	Text size of the title.
--bit-SnackBar-title-font-weight	--bit-tpg-fw-medium	Weight of the title.
--bit-SnackBar-body-font-size	Per Size	Text size of the body.
--bit-SnackBar-icon-color	The text color	Color of the leading icon and of the loading spinner.
--bit-SnackBar-icon-size	Per Size	Size of the leading icon and of the loading spinner.
--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.

API

Every parameter, public member, sub-class and enum this component exposes.

BitSnackBar 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.
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.

BitSnackBar 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.
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.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
Disabled	bool	false	Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

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.
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.

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 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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.

Open an issue

Start a discussion

Edit this page

View the component source

Edit the component

Usage

Basic

Position & Transition

Auto dismiss

Persistent

Swipe to dismiss

Stacking

Icon

Actions

Multiline & MaxWidth

Templates

Events

Programmatic control

Service

Accessibility

Cascading parameters

Color

External Icons

Size

Style & Class

RTL