Badge
Badge component is a small visual element used to highlight or indicate specific information within a user interface.
Usage
Basic
63
Variant
The badge offers three variants: Fill (default), Outline, and Text.
84
84
84
84
84
84
Overlap
The badge distance from its base content can be changed using the Overlap parameter.
63
Dot
Badge size can be reduced and hide any of its content.
Max
When content is integer type, you can define a max value to display.
63+
Customization
Here are some examples of customizing the badge content.
String content
Text
Icon
Hidden
You can easily hide the badge using its Hidden parameter.
63
Position
You can customize the badge position to enhance the user experience.
63
TopLeft
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
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
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with the Icon parameter.
See the BitIconInfo section in the parameters table for usage.
4
63
3
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
84Styles & Classes:
84
84
Events
Managing clicking on the badge event (OnClick).
0
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. |
| Icon | BitIconInfo? | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | string? | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| 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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
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. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
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.
- On this page