Banner Component

Tones — full-bleed

<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

<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

<Banner Tone="info"
        Title="Welcome!"
        Message="Thanks for trying the design system."
        @bind-IsVisible="_visible" />

@code {
    private bool _visible = true;
}