SnackBar

A snack bar host renders nothing until something is shown in it, so it is placed once - normally in the layout - and captured with @ref. Each of the Info, Success, Warning, SevereWarning and Error shortcuts shows a new item in the matching color and returns it, and the plain Show takes any color. The item stays until it is dismissed, since auto-dismiss is opt-in.

The Position parameter pins the stack to one of the six corners and edges of the screen (default is BottomEnd). The start/end naming follows the text direction, so a snack bar keeps to the same side of the reading order in both LTR and RTL, and the enter animation always slides out of the edge the stack is pinned to. Offset takes any CSS length and moves the whole stack away from those edges, which is how a snack bar is kept clear of the chrome the app already has there - a bottom app bar, a cookie banner, the safe area of a phone.

AutoDismiss starts a countdown for each item, AutoDismissTime sets how long it runs (default is 3 seconds), and a bar along the bottom edge draws it out - HideProgress takes that bar away and ReverseProgress makes it drain from full to empty rather than fill. Give anything the user has to read or act on at least five seconds. The countdown holds while the pointer or the keyboard focus is inside the item, which is what keeps a notification from being taken away from someone who is still reading it or reaching for its action, and is how the countdown meets WCAG 2.2.1 without a longer timeout; set PauseOnHover to false to opt out. PauseOnPageHidden holds it while the page sits in a background tab, so a notification is not spent before the tab is looked at again, and PauseOnWindowBlur does the same while the window is merely covered by another one - which the page visibility API says nothing about. Both need AddBitBlazorUIServices; without it they turn themselves off rather than fail.

A single item can also ask for a lifetime of its own, which is how a short confirmation and a long report can share one host:

Persistent removes the dismiss button and keeps the item out of the countdown and out of the Escape key, so it stays until the code that opened it closes it through Close - which is what a snack bar reporting a job still in progress needs. The same is available per item through BitSnackBarItem.Persistent (or the persistent argument of the shortcuts), so one host can mix items that go away on their own with items that do not.

HideDismiss only takes the button away: the item still counts down, still answers Escape and still takes part in DismissOnClick. It is for the notification that carries its own way out - an action button, or a countdown short enough that a second way out would only be noise.

SwipeToDismiss lets an 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 where the dismiss button is a small target and the pointer is a thumb. SwipeThreshold is how far the drag has to go before it counts (default is 50 pixels); anything short of that springs the item back. A persistent item does not follow the pointer at all, for the same reason it has no dismiss button, and a dismissal this way reports itself as BitSnackBarDismissReason.Swipe.

Last dismissal:

MaxItems caps how many items are on screen at once, so a burst of notifications cannot grow into a wall that covers the page, and OverflowBehavior decides what happens to the one that does not fit: DismissOldest (the default) keeps the newest news on screen, Queue holds the item back until a slot frees up so that none of them is missed - PendingItems is what is still waiting - and Skip drops it. NewestOnTop puts the newest item at the head of the stack instead of the tail, and PreventDuplicates skips an item whose title, body and color match one that is already showing, returning that one instead, starting its countdown over and counting the repeat in BitSnackBarItem.DuplicateCount - which is what a template shows the repeat with, so suppressing it hides the noise without hiding that the thing happened again.

Showing:   Waiting:   Repeats suppressed:

ShowIcon puts a leading glyph in each item, chosen from its color, which makes the severity of a notification readable at a glance instead of from the fill alone. IconName replaces that glyph for every item, BitSnackBarItem.IconName for a single one, and BitSnackBarItem.HideIcon drops it from one item while the rest keep theirs. The glyph is decorative, so it is hidden from screen readers - the text is what they announce.

An action is the point of a notification that reports something the user can still do about it - "Undo", "Retry", "View". ActionsTemplate renders that content under the body of every item and receives the item, so one template can act on whichever notification it was rendered for; a single item can carry its own BitSnackBarItem.Actions instead. Keep the countdown long enough (or the item persistent) for the action to be reachable - the pause on hover and focus already holds it while the button is being aimed at.

Last action: -

By default the title and the body are kept to a single line and cut off with an ellipsis, with the full text in a tooltip, which keeps the stack the same size no matter what is shown in it. Multiline lets both wrap instead, for the notifications whose whole text has to be read. Neither shows until the item has a width to run out of: an item is only as wide as its longest line needs, so the same message sits on one line either way until MaxWidth caps it - at that measure the default truncates and a multiline one wraps.

TitleTemplate and BodyTemplate replace the text of the header and of the body, each receiving the string it stands in for, while Template takes over the whole item - header, body and actions - and receives the item itself. A template that takes over the item is responsible for whatever of it should still be there, including a way to dismiss it; the countdown bar is still drawn underneath.

OnShow and OnDismiss report the item that arrived or left, and BitSnackBarItem.DismissReason tells which of them took it away - the button, the Escape key, a click, a swipe, the countdown, a Close call, Clear, or the host making room for a newer item - so a callback can tell a notification the user threw away from one that simply ran out of time. OnItemClick reports a click anywhere inside an item, and DismissOnClick makes that click dismiss it as well, which is the usual way a notification that links somewhere gets out of the way once it is followed; a clickable item carries a tab stop of its own and answers Enter and Space, so it is reachable without a pointer. Each item can also carry its own OnClick and OnDismiss callbacks, which run first, and its own BitSnackBarItem.Data - a payload the component never reads, so a shared callback can find the entity or the correlation id the notification was about without a lookup table.

Log:

The item a Show call returns is the handle to the notification: change its title, body or color and hand it to Update to turn it into the report of whatever it was waiting for, restarting its countdown and announcing it again. Pause and Resume hold and release that countdown from code - a hold of its own, which the pointer wandering over the item and away again does not let go - Clear closes everything at once, and Items is the list of what is showing right now. ClearOnNavigation does that last one for you the moment the app routes somewhere else, so a notification about the page it was raised on does not outlive that page.

Showing:

A notification nobody can see has to be heard. An element that arrives with its text already inside it is silent in most screen readers, so the host keeps two live regions in the page from its first render and puts the text of an arriving item into whichever matches how loudly it asked to be heard: the colors that report a problem interrupt as an alert, the rest wait for a pause as a status. Role (or BitSnackBarItem.Role) overrides that choice, and a role that is not a live one leaves the item unannounced. BitSnackBarItem.AnnounceText replaces what is said, for an item whose text on screen is not what should be read out - an abbreviation, or a Template whose content lives elsewhere.

The rest is the same care in the other places: AriaLabel names the region a screen reader user jumps to, DismissAriaLabel names the dismiss button (which is last in the DOM although it is drawn first from the end, so the notification is read before the button that throws it away), Escape closes the item the focus is inside and hands the focus on to the next one, and the countdown holds while the item is being read.

A notification sits at the end of the document and takes itself away again, so without a shortcut a keyboard user has no reliable way to reach one before it is gone. Hotkey is that shortcut: a list of KeyboardEvent.code values (the modifiers written as altKey, ctrlKey, shiftKey, metaKey) that moves the focus to the notification region, from where the next Tab walks into the dismiss buttons and the actions. Name it in AriaLabel so it can be found, and use FocusAsync instead where the app has a shortcut registry of its own.

Everything the snack bar offers, in one place: pick a color, a position, a direction and a lifetime, type a title and a body, then show it. TransitionDuration is how long the enter and exit animations run (default 200ms) - a dismissed item is kept in the DOM for that long so its exit can play, and zero takes it away at once with no animation at all.

The color of an item comes from the general BitColor palette, either through one of the named shortcuts or through the color argument of Show. It decides the fill and the foreground, the default leading icon, and how the item is announced: the colors that report a problem (Warning, SevereWarning, Error) interrupt the screen reader as an alert, the rest wait for a pause as a status. Variant switches all of them between the filled, outlined and text looks.

Use icons from external libraries like FontAwesome and Bootstrap Icons with the DismissIcon and Icon parameters. BitIconInfo.Fa, BitIconInfo.Bi and BitIconInfo.Css build the class list for a library, and a bare string of CSS classes converts to one implicitly.

FontAwesome:

Bootstrap:

Size scales the padding, the gaps and the type of the items between Small, Medium (the default) and Large, so a snack bar can sit alongside the density of the rest of the app.

A single item takes a cssStyle and a cssClass of its own through Show, which is how one notification is made to stand out from the rest of the host. Styles and Classes reach every part of every item - root, container, header, icon, title, body, actions, dismiss button and progress bar.

Custom style

Custom class

Custom styles

Custom classes

Set Dir to BitDir.Rtl to lay a snack bar out right-to-left. The positions are named after the reading order rather than the screen, so a BottomStart stack sits at the bottom right here, the leading icon comes first from the right, and the dismiss button keeps to the inline end.