Badge
Badge component is a small visual element used to highlight or indicate specific information within a user interface.
Usage
Basic
The badge offers three appearance options: Primary (default), Standard, and Text.
5
15
25
Primary badge
Primary badges are attention-grabbing, featuring a filled appearance.
They're designed for essential actions at the core of your application.
35
45
Standard badge
Standard badges offer a moderate level of emphasis, suitable for important actions that aren't central to the application.
They serve as a middle ground between Text badges and the more prominent Primary Badges, providing flexibility in emphasis.
55
65
Text badge
Text badges are best suited for understated actions, serving as a less prominent choice in various interface elements.
75
85
Overlap
The badge distance from its base content can be changed using the Overlap parameter.
7
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.
50+
Customization
Here are some examples of customizing the badge content.
Text
Hidden
You can easily hide the badge.
Position
You can customize the badge position to enhance the user experience.
99+
TopRight
Color
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.
Info
99+
99+
99+
Success
99+
99+
99+
Warning
99+
99+
99+
SevereWarning
99+
99+
99+
Error
99+
99+
99+
Size
Varying sizes for badges tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Primary
99+
99+
99+
Standard
99+
99+
99+
Text
99+
99+
99+
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
99+
Item 1
Item 2
Item 3
99+Styles & Classes:
99+
99+
Events
Managing clicking on the badge event (OnClick).
0
Implementation
BitBadge parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
Appearance | BitAppearance | BitAppearance.Primary | The appearance of badge, Possible values: Primary | Standard | Text |
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 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 | 99 | 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 | BitBadgePosition | BitBadgePosition.TopRight | The position of the badge. |
Size | BitBadgeSize? | null | The size of badge, Possible values: Small | Medium | Large |
Styles | BitBadgeClassStyles? | null | Custom CSS styles for different parts of the BitBadge. |
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. |
BitAppearance enum
Name |
Value |
Description |
---|---|---|
Primary | 0 | The appearance for primary actions that are high-emphasis. |
Standard | 1 | The appearance for important actions that are medium-emphasis. |
Text | 2 | The appearance for less-pronounced actions. |
BitColor enum
Name |
Value |
Description |
---|---|---|
Info | 0 | Info styled badge. |
Success | 1 | Success styled badge. |
Warning | 2 | Warning styled badge. |
SevereWarning | 3 | Severe Warning styled badge. |
Error | 4 | Error styled badge. |
BitBadgeSize enum
Name |
Value |
Description |
---|---|---|
Small | 0 | The small size badge. |
Medium | 1 | The medium size badge. |
Large | 2 | The large size badge. |
BitBadgePosition enum
Name |
Value |
Description |
---|---|---|
TopRight | 0 | |
TopCenter | 1 | |
TopLeft | 2 | |
CenterLeft | 3 | |
Center | 4 | |
CenterRight | 5 | |
BottomLeft | 6 | |
BottomCenter | 7 | |
BottomRight | 8 |
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. |