Home Docs

Badge

Badge component is a small visual element used to highlight or indicate specific information within a user interface.

Usage

Basic
63
<BitBadge Content="63">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Variant
The badge offers three variants: Fill (default), Outline, and Text.

84 84 84


84 84 84
<BitBadge Content="84" Variant="BitVariant.Fill">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>


<BitBadge Content="84" Variant="BitVariant.Fill" IsEnabled="false">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Variant="BitVariant.Outline" IsEnabled="false">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Variant="BitVariant.Text" IsEnabled="false">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Overlap
The badge distance from its base content can be changed using the Overlap parameter.


63
<BitBadge Content="63" Overlap>
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Dot
Badge size can be reduced and hide any of its content.


<BitBadge Dot>
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Max
When content is integer type, you can define a max value to display.


63+
<BitBadge Max="63" Content="100">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Customization
Here are some examples of customizing the badge content.


String content

Text



Icon

<BitBadge Content="@("Text")">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge IconName="@BitIconName.Ringer">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Hidden
You can easily hide the badge using its Hidden parameter.



63
<BitToggle @bind-Value="hidden" Label="Hide the badge" />

<BitBadge Hidden="hidden" Content="63">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
@code {
    private bool hidden;
}
Position
You can customize the badge position to enhance the user experience.

63 
<BitBadge Content="63" Position="badgePosition">
    <BitButton Variant="BitVariant.Outline">Position</BitButton>
</BitBadge>

<BitDropdown Items="badgePositionList" @bind-Value="badgePosition" Style="width: 8rem;" />
@code {
    private BitPosition badgePosition;
    
    private List<BitDropdownItem<BitPosition>> badgePositionList = Enum.GetValues(typeof(BitPosition))
        .Cast<BitPosition>()
        .Select(enumValue => new BitDropdownItem<BitPosition>
        {
            Value = enumValue,
            Text = enumValue.ToString()
        })
        .ToList();
}
Color
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.


Primary

84 84 84


Secondary

84 84 84


Tertiary

84 84 84


Info

84 84 84


Success

84 84 84


Warning

84 84 84


SevereWarning

84 84 84


Error

84 84 84
<BitBadge Content="84" Color="BitColor.Primary">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Primary" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Primary" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Secondary">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Secondary" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Secondary" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Tertiary">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Tertiary" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Tertiary" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Info">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Info" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Info" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Success">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Success" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Success" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Warning">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Warning" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Warning" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.SevereWarning">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.SevereWarning" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.SevereWarning" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Color="BitColor.Error">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Error" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Color="BitColor.Error" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Size
Varying sizes for badges tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.


Small

84 84 84


Medium

84 84 84


Large

84 84 84
<BitBadge Content="84" Size="BitSize.Small" Variant="BitVariant.Fill">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Small" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Small" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Size="BitSize.Medium" Variant="BitVariant.Fill">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Medium" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Medium" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" Size="BitSize.Large" Variant="BitVariant.Fill">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Large" Variant="BitVariant.Outline">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Size="BitSize.Large" Variant="BitVariant.Text">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


Component's Style & Class:

84
Anchor
84



Styles & Classes:

84 84
<style>
    .custom-class {
        border-radius: 1rem;
        box-shadow: aqua 0 0 0.5rem;
    }

    .custom-class div {
        padding: 0.5rem;
        color: blueviolet;
    }

    .custom-root {
        margin-left: 2rem;
        text-shadow: aqua 0 0 0.5rem;
    }

    .custom-wrapper {
        padding: 1rem;
    }

    .custom-badge {
        border-end-end-radius: 0.5rem;
        border-start-end-radius: unset;
        border-end-start-radius: unset;
        border-start-start-radius: 0.5rem;
    }

    .custom-icon {
        color: dodgerblue;
    }
</style>

<BitBadge Content="84" Style="color: dodgerblue;">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
<BitBadge Content="84" Class="custom-class" Variant="BitVariant.Outline">
    <div>Anchor</div>
</BitBadge>


<BitBadge Content="84" IconName="@BitIconName.Info"
           Styles="@(new() { Root = "color: tomato;",
                             Badge = "border-radius: unset;",
                             Icon = "color: tomato;" })">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>

<BitBadge Content="84" IconName="@BitIconName.Info"
          Variant="BitVariant.Outline"
          Classes="@(new() { Root = "custom-root",
                             BadgeWrapper = "custom-wrapper",
                             Badge = "custom-badge",
                             Icon = "custom-icon" })">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
Events
Managing clicking on the badge event (OnClick).


0
<BitBadge Content="counter" OnClick="() => counter++">
    <BitIcon IconName="@BitIconName.Mail" Color="BitColor.Tertiary" />
</BitBadge>
@code {
    private int counter;
}

API

BitBadge parameters
Name
Type
Default value
Description
ChildContent RenderFragment? null Child content of component, the content that the badge will apply to.
Classes BitBadgeClassStyles? null Custom CSS classes for different parts of the BitBadge.
Color BitColor? null The general color of the badge.
Content object? null Content you want inside the badge. Supported types are string and integer.
Dot bool false Reduces the size of the badge and hide any of its content.
Hidden bool false The visibility of the badge.
IconName string? null Sets the Icon to use in the badge.
Max int? null Max value to display when content is integer type.
OnClick EventCallback<MouseEventArgs> Button click event if set.
Overlap bool false Overlaps the badge on top of the child content.
Position BitPosition? null The position of the badge.
Size BitSize? null The size of badge, Possible values: Small | Medium | Large
Styles BitBadgeClassStyles? null Custom CSS styles for different parts of the BitBadge.
Variant BitVariant? null The visual variant of the badge.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitBadgeClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitBadge.
BadgeWrapper string? null Custom CSS classes/styles for the badge wrapper of the BitBadge.
Badge string? null Custom CSS classes/styles for the badge of the BitBadge.
Icon string? null Custom CSS classes/styles for the icon of the BitBadge.
BitColor enum
Name
Value
Description
Primary 0 Info Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
BitSize enum
Name
Value
Description
Small 0 The small size badge.
Medium 1 The medium size badge.
Large 2 The large size badge.
BitPosition enum
Name
Value
Description
TopLeft 0
TopCenter 1
TopRight 2
TopStart 3
TopEnd 4
CenterLeft 5
Center 6
CenterRight 7
CenterStart 8
CenterEnd 9
BottomLeft 10
BottomCenter 11
BottomRight 12
BottomStart 13
BottomEnd 14
BitVariant enum
Name
Value
Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page