Blazor Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Badge pill variants:

Primary Secondary Success Warning Info Danger
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Primary, BaseRadius.Pill}">Primary</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Secondary, BaseRadius.Pill}">Secondary</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Success, BaseRadius.Pill}">Success</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Warning, BaseRadius.Pill}">Warning</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Info, BaseRadius.Pill}">Info</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Danger, BaseRadius.Pill}">Danger</BlazorBadgeContent>
</BlazorBadge>

Badge circle variants:

Hello World Hello World new alert new message new message new message
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Primary}" ScreenReaderText="Hello World"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Secondary}" ScreenReaderText="Hello World"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Success}" ScreenReaderText="new alert"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Info}" ScreenReaderText="new message"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Warning}" ScreenReaderText="new message"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Danger}" ScreenReaderText="new message"/>
</BlazorBadge>

Positioned Badge:

top left BL new notification new notification BL new notification
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Left" Vertical="VerticalPosition.Top" ScreenReaderText="top left"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Blazor Library</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Middle" Vertical="VerticalPosition.Top">BL</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent ScreenReaderText="new notification" Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Right" Vertical="VerticalPosition.Top" />
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Right" Vertical="VerticalPosition.Bottom" ScreenReaderText="new notification"/>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Blazor Library</BlazorButton>
    <BlazorBadgeContent Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Middle" Vertical="VerticalPosition.Bottom">BL</BlazorBadgeContent>
</BlazorBadge>
<BlazorBadge>
    <BlazorButton type="button">Hello World</BlazorButton>
    <BlazorBadgeCircleNotificationContent Variants="new[] {BaseVariants.Primary}" Horizontal="HorizontalPosition.Left" Vertical="VerticalPosition.Bottom" ScreenReaderText="new notification"/>
</BlazorBadge>

Inline Badge Variants:

Hello World New
Hello World New
Hello World New
Hello World New
Hello World New
Hello World New
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Primary}">New</BlazorInlineBadge></div>
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Secondary}">New</BlazorInlineBadge></div>
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Success}">New</BlazorInlineBadge></div>
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Warning}">New</BlazorInlineBadge></div>
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Info}">New</BlazorInlineBadge></div>
<div>Hello World <BlazorInlineBadge Variants="new[] {BaseVariants.Danger}">New</BlazorInlineBadge></div>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorBadge position-relative d-inline-grid
BlazorBadgeContent badge translate-middle position-absolute
BlazorBadgeContent.top top-0
BlazorBadgeContent.center top-50
BlazorBadgeContent.bottom top-100
BlazorBadgeContent.left left-0
BlazorBadgeContent.middle left-50
BlazorBadgeContent.right left-100
BlazorBadgeContent.primary text-bg-primary
BlazorBadgeContent.secondary text-bg-secondary
BlazorBadgeContent.success text-bg-success
BlazorBadgeContent.danger text-bg-danger
BlazorBadgeContent.warning text-bg-warning
BlazorBadgeContent.info text-bg-info
BlazorBadgeContent.rounded1 rounded-1
BlazorBadgeContent.rounded2 rounded-2
BlazorBadgeContent.rounded3 rounded-3
BlazorBadgeContent.rounded4 rounded-4
BlazorBadgeContent.rounded5 rounded-5
BlazorBadgeContent.pill rounded-pill
BlazorBadgeContent.circle rounded-circle blazor-padding-2
BlazorInlineBadge badge
BlazorInlineBadge.primary text-bg-primary
BlazorInlineBadge.secondary text-bg-secondary
BlazorInlineBadge.success text-bg-success
BlazorInlineBadge.danger text-bg-danger
BlazorInlineBadge.warning text-bg-warning
BlazorInlineBadge.info text-bg-info

Parameters

BlazorBadge

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorBadgeCircleNotificationContent

Name Type Description
Horizontal HorizontalPosition Specify the horizontal position of the circular notification badge relative to its parent element.
Vertical VerticalPosition Specify the vertical position of the circular notification badge relative to its parent element.
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
ScreenReaderText string Allows developers to specify alternative text that is accessible to screen readers. By including descriptive text using this parameter, developers ensure that users with visual impairments or who rely on assistive technologies can comprehend the purpose

BlazorBadgeContent

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Horizontal HorizontalPosition Specify the horizontal position of the notification badge relative to its parent element.
Vertical VerticalPosition Specify the vertical position of the notification badge relative to its parent element.
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.

BlazorInlineBadge

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙