eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsSurfaces & display
Banner
View source
1 min read
A persistent, in-flow message about the state of the page, with up to two actions and an optional dismiss.
1
using eQuantic.UI.Components;
STATUS
InfoOne line of supporting detail.
Info
SuccessOne line of supporting detail.
Success
WarningOne line of supporting detail.
Warning
DestructiveOne line of supporting detail.
Destructive
Usage
1
2
3
4
5
6
7
new Banner("Your trial ends in 3 days")
{
Status = Variant.Warning,
Body = "Upgrade to keep automatic payments running.",
PrimaryAction = new Button("Upgrade", Variant.Warning, onPressed: OpenBilling),
OnDismiss = () => SetState(() => _bannerShown = false),
}
API
Prop
Type
Default
Description
Title
string
The headline, in plain language.
Body
string?
null
One or two sentences of detail.
Status
Variant
Info
Semantic role; drives fill, glyph and announcement priority.
PrimaryAction
Button?
null
The action that resolves the message.
SecondaryAction
Button?
null
An optional second action.
OnDismiss
Action?
null
Non-null adds a close affordance.
States
State
Rendering
Visible
Subtle variant fill with OnSubtle text
Dismissed
Height collapses over Motion.Exit
Accessibility
status for info and success, alert for warning and destructive. The actions are ordinary focus stops.
When to use
Page-level state that persists until resolved.
Avoid
Confirming something that already happened — that is a Toast.
More than one banner at a time.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Banner.cs.