Badge - Fod.DemoPage

Numbered Badge

The numbered badge serves as a visual indicator to inform users about the current status or configuration of the screen. It provides feedback on the number of active items.

Styles

dark

light

neutral

accent

razor

<FodBadge Counter="1" Color="BadgeColor.Dark" Size="Size.ExtraLarge"/>
<FodBadge Counter="1" Color="BadgeColor.Light" Size="Size.ExtraLarge"/>
<FodBadge Counter="1" Color="BadgeColor.Neutral" Size="Size.ExtraLarge"/>
<FodBadge Counter="1" Color="BadgeColor.Accent" Size="Size.ExtraLarge"/>

Sizes

extra-large

large

medium

razor

<FodBadge Counter="1" Color="BadgeColor.Accent" Size="Size.ExtraLarge"/>
<FodBadge Counter="1" Color="BadgeColor.Accent" Size="Size.Large"/>
<FodBadge Counter="1" Color="BadgeColor.Accent" Size="Size.Medium"/>

Notification Badge

The notification badge serves to alert users to the presence and quantity of unread or pending notifications. It provides a visual cue, in the form of a numerical count. Notification badges are typically positioned at the corner of a parent component. These badges can be used as standalone elements or nested within other UI components such as avatars, list items.

Types

dot

numbered

razor

<FodBadge Counter="1" Color="BadgeColor.Notification" Type="BadgeType.Numbered" Size="Size.Small"/>
<FodBadge Counter="1" Color="BadgeColor.Notification" Type="BadgeType.Numbered" Size="Size.Medium"/>
<FodBadge Counter="1" Color="BadgeColor.Notification" Type="BadgeType.Numbered" Size="Size.Large"/>
<FodBadge Counter="1" Color="BadgeColor.Notification" Type="BadgeType.Numbered" Size="Size.ExtraLarge"/>

Behavior

Badge counter values from single digit to 1K+ overflow.

AB

1-digit

AB

2-digit

AB

3-digit

AB

4-digit (truncated to 1K+)

razor

<FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing32" Align="StackAlign.Center" style="flex-wrap:wrap;row-gap:16px;">
    <FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing8" Align="StackAlign.Center">
        <div style="position:relative;display:inline-flex;">
            <span class="demo-avatar">AB</span>
            <FodBadge Counter="2" Color="BadgeColor.Notification" Type="BadgeType.Numbered"
                      Size="Size.Large" Style="position:absolute;top:-6px;right:-6px;"/>
        </div>
        <span>1-digit-number</span>
    </FodStack>

    <FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing8" Align="StackAlign.Center">
        <div style="position:relative;display:inline-flex;">
            <span class="demo-avatar">AB</span>
            <FodBadge Counter="12" Color="BadgeColor.Notification" Type="BadgeType.Numbered"
                      Size="Size.Large" Style="position:absolute;top:-6px;right:-6px;"/>
        </div>
        <span>2-digit-number</span>
    </FodStack>

    <FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing8" Align="StackAlign.Center">
        <div style="position:relative;display:inline-flex;">
            <span class="demo-avatar">AB</span>
            <FodBadge Counter="256" Color="BadgeColor.Notification" Type="BadgeType.Numbered"
                      Size="Size.Large" Style="position:absolute;top:-6px;right:-6px;"/>
        </div>
        <span>3-digit-number</span>
    </FodStack>

    <FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing8" Align="StackAlign.Center">
        <div style="position:relative;display:inline-flex;">
            <span class="demo-avatar">AB</span>
            <FodBadge Counter="1000" Color="BadgeColor.Notification" Type="BadgeType.Numbered"
                      Size="Size.Large" Style="position:absolute;top:-6px;right:-6px;"/>
        </div>
        <span>4-digit-number</span>
    </FodStack>
</FodStack>

Accessibility

All components are designed to meet accessibility standards in compliance with WCAG 2.1 AA guidelines. This includes ensuring adequate contrast, proper labeling, and target sizes on pointer and touch devices.

API Reference

Complete FodBadge parameter reference.

No properties defined.