sufi-blazor/docs/components/feedback/SbBadge.md

SbBadge

A small status indicator that displays a count or dot to draw attention to an element. Commonly used for notification counts, status indicators, or labeling items.

Parameters

Parameter	Type	Default	Description
Value	int?	null	Numeric value to display in the badge
Max	int	99	Maximum value before showing "max+" (e.g., "99+")
Dot	bool	false	When true, shows as a small dot without value
Color	SbColor	Primary	Badge color theme
AriaLabel	string?	null	Accessible label for screen readers
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Custom content to display inside the badge (takes precedence over Value)

Template Usage

<SbBadge>
    Custom Content
</SbBadge>

CSS Classes

• sb-badge - Base class
• sb-badge--primary - Primary color
• sb-badge--secondary - Secondary color
• sb-badge--success - Success color
• sb-badge--warning - Warning color
• sb-badge--danger - Danger color
• sb-badge--dot - Dot variant (no text)

Accessibility

• Uses aria-label for screen reader description
• Content is visible to assistive technologies

Examples

Basic Badge with Value

<SbBadge Value="5" />
<SbBadge Value="42" />
<SbBadge Value="150" Max="99" /> @* Shows "99+" *@

Different Colors

<SbBadge Value="3" Color="SbColor.Primary" />
<SbBadge Value="3" Color="SbColor.Success" />
<SbBadge Value="3" Color="SbColor.Warning" />
<SbBadge Value="3" Color="SbColor.Danger" />

Dot Badge

<SbBadge Dot="true" Color="SbColor.Success" />
<SbBadge Dot="true" Color="SbColor.Danger" />

With Custom Content

<SbBadge Color="SbColor.Primary">
    NEW
</SbBadge>

<SbBadge Color="SbColor.Warning">
    BETA
</SbBadge>

Badge on Element

<div style="position: relative; display: inline-block;">
    <SbIcon Name="bell" />
    <SbBadge Value="3" 
             Color="SbColor.Danger"
             Style="position: absolute; top: -8px; right: -8px;" />
</div>

With Accessibility

<SbBadge Value="5" AriaLabel="5 unread notifications" />