Component

BOBBadge

Compact label for status, counts, or tags. Circular, dot-only, or with content — use it anywhere.

API reference ↗

Basic usage

New 12 Featured
RAZOR 
<BOBBadge>New</BOBBadge>
<BOBBadge>12</BOBBadge>
<BOBBadge>
    <BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_star" Size="BOBSize.Small" />
    Featured
</BOBBadge>

Dot badge

An empty badge renders as a dot — perfect as an unread indicator.

RAZOR 
<BOBBadge />
<BOBBadge BackgroundColor="@PaletteColor.Success" />
<BOBBadge BackgroundColor="@PaletteColor.Warning" />
<BOBBadge BackgroundColor="@PaletteColor.Error" />

Circular

Use Circular for single-digit or icon badges.

1 9 !
RAZOR 
<BOBBadge Circular="true">1</BOBBadge>
<BOBBadge Circular="true" BackgroundColor="@PaletteColor.Success">9</BOBBadge>
<BOBBadge Circular="true" BackgroundColor="@PaletteColor.Error">!</BOBBadge>

Colors

Primary Success Warning Error Info
RAZOR 
<BOBBadge BackgroundColor="@PaletteColor.Primary" Color="@PaletteColor.PrimaryContrast">Primary</BOBBadge>
<BOBBadge BackgroundColor="@PaletteColor.Success" Color="@PaletteColor.SuccessContrast">Success</BOBBadge>
<BOBBadge BackgroundColor="@PaletteColor.Warning" Color="@PaletteColor.WarningContrast">Warning</BOBBadge>
<BOBBadge BackgroundColor="@PaletteColor.Error" Color="@PaletteColor.ErrorContrast">Error</BOBBadge>
<BOBBadge BackgroundColor="@PaletteColor.Info" Color="@PaletteColor.InfoContrast">Info</BOBBadge>

Shadow & Border

Elevated Pill Rounded Bordered
RAZOR 
<BOBBadge Shadow="@BOBShadowPresets.Elevation(3)">Elevated</BOBBadge>
<BOBBadge Border="@BOBBorderPresets.Pill" BackgroundColor="@PaletteColor.Primary" Color="@PaletteColor.PrimaryContrast">Pill</BOBBadge>
<BOBBadge Border="@BOBBorderPresets.RoundedLarge" BackgroundColor="@PaletteColor.Secondary" Color="@PaletteColor.SecondaryContrast">Rounded</BOBBadge>
<BOBBadge Border="@BOBBorderPresets.Default">Bordered</BOBBadge>

Notification badge

BOBNotificationBadge overlays a badge onto any child content.

4
99+
RAZOR 
<BOBNotificationBadge>
    <ChildContent>
        <BOBButton BackgroundColor="@PaletteColor.Secondary" Text="Messages" LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_mail" />
    </ChildContent>
    <BadgeContent>4</BadgeContent>
</BOBNotificationBadge>
<BOBNotificationBadge>
    <ChildContent>
    <BOBButton BackgroundColor="@PaletteColor.Warning" Text="Inbox" LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_inbox" />
    </ChildContent>
    <BadgeContent>99+</BadgeContent>
</BOBNotificationBadge>
<BOBNotificationBadge>
    <ChildContent>
    <BOBButton BackgroundColor="@BOBColor.Chocolate.Darken2.ToString(ColorOutputFormats.Hex)" Text="Alerts" LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_notifications" />
    </ChildContent>
</BOBNotificationBadge>

Properties

BOBBadge

7 rows.
PropertyTypeDefaultDescription
ChildContentRenderFragment?Content rendered inside the badge (typically a number or short label).
CircularboolWhen , the badge is forced to a circular shape; otherwise it adapts to its content.
SizeBOBSizeBOBSize.MediumVisual size of the badge.
Colorstring?Text color of the badge. Accepts any valid CSS color value.
BackgroundColorstring?Background color of the badge. Accepts any valid CSS color value.
BorderBorderStyle?Border style applied to the badge.
ShadowShadowStyle?Shadow style applied to the badge.

BOBNotificationBadge

9 rows.
PropertyTypeDefaultDescription
ChildContentRenderFragment?Content rendered inside the component.
BadgeContentRenderFragment?BadgeContent.
PositionBadgePositionBadgePosition.TopRightPosition.
CircularbooltrueCircular.
SizeBOBSizeBOBSize.SmallVisual size of the component.
Colorstring?Text or foreground color. Accepts any valid CSS color value.
BackgroundColorstring?Background color. Accepts any valid CSS color value.
BorderBorderStyle?Border style applied to the component.
ShadowShadowStyle?Shadow style applied to the component.