Banner
Full-width announcement strip. Use for system-wide messages, scheduled-maintenance warnings, or marketing announcements. Distinct from Alert (more prominent, top-of-page placement).
Tones — full-bleed
Five tones including the gradient announcement variant
info / success / warning / error / announcement
razor
<Banner Tone="info"
Message="System maintenance scheduled for Mar 15, 10PM-2AM CST."
Dismissible="false" />
<Banner Tone="warning"
Title="Approaching quota."
Message="You're using 85% of monthly storage."
Dismissible="false">
<Actions>
<Button Variant="secondary" Size="sm" Text="Manage storage" />
</Actions>
</Banner>
<Banner Tone="announcement"
Title="🎉 New: Patient export"
Message="Bulk-export patient records to CSV from any list view." />Compact — in-page rounded banners
Compact="true" for inline notices
Use inside cards or section bodies where the full-bleed style would be too loud.
razor
<Banner Tone="info" Compact="true"
Message="Tip: Use ⌘K to open the command menu." />
<Banner Tone="warning" Compact="true"
Title="Heads up:"
Message="This action will affect 47 records." />Dismissible
bind-IsVisible toggles the banner
The banner removes itself from layout when dismissed; bind IsVisible to bring it back.
razor
<Banner Tone="info"
Title="Welcome!"
Message="Thanks for trying the design system."
@bind-IsVisible="_visible" />
@code {
private bool _visible = true;
}