# Badge
## Description
Badge is the small marker that sits on another element and reports what is waiting behind it. It takes a number, a string, an icon or a template, caps a count at a max, hides itself when that count reaches zero, or drops its content altogether and becomes a dot. It anchors to any of fifteen positions around its child - physical or direction-aware - and can be nudged, overlapped, ringed against a busy background or given a pulse while something is in progress. It can also step out of the overlay and sit beside its child in the flow, or stand entirely on its own where there is nothing to overlay. It turns into a real keyboard-operable button as soon as it is given a click handler and into a real link as soon as it is given a URL, and carries a text alternative and a live region so that what it says visually also reaches a screen reader.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Bordered | `bool` | false | Draws a ring around the badge in the color of the page behind it, so it stays legible over a busy child such as an avatar or an image. |
| ChildContent | `RenderFragment?` | null | Child content of component, the content that the badge will apply to. When it is not set the badge renders standalone, in the normal flow of the page. |
| 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. A number is capped by Max and hidden by ShowZero when it is zero, a string is rendered as it is, and any other value is rendered through its ToString(). A badge given no content, no icon and no template at all is not rendered. |
| ContentTemplate | `RenderFragment?` | null | The custom template to render inside the badge, in place of Content. A template is content of its own, so neither Max nor ShowZero reads it, and it is markup rather than words, so a Live badge showing one needs a Description before its live region has anything to announce. |
| Description | `string?` | null | The text alternative of the badge for assistive technologies, for example "5 unread messages". It is rendered into the badge visible only to assistive technologies, and hides the visual content from them so the two are not announced twice. |
| Dot | `bool` | false | Reduces the size of the badge and hide any of its content. |
| Hidden | `bool` | false | The visibility of the badge. A hidden badge is removed from the DOM while its child content keeps rendering. |
| Href | `string?` | null | The URL the badge navigates to, which also turns the badge into a link: an anchor that is focusable, offers the context menu and the middle click, and is announced as a link. While IsEnabled is false the href is dropped and the badge leaves the tab order. |
| 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. |
| Inline | `bool` | false | Lays the badge out next to its child content in the normal flow of the page instead of over it. Overlap stops applying and only the side of Position is read: the Start and Left families put the badge before the child content, every other one after it. |
| Live | `bool` | false | Announces the badge to assistive technologies whenever its content changes, by turning it into a polite live region. The region is kept on the page whether or not the badge itself is, so a counter that appears, changes and disappears is announced every time. It reads out the Description when there is one and the counter itself otherwise. |
| Max | `int?` | null | Max value to display when content is a number. A content above it renders as the max followed by a plus sign, for example 99+, and the badge carries the figure it shortened as its tooltip unless a Title of its own says something better. |
| OffsetX | `string?` | null | Moves the badge along the horizontal axis by the given CSS length, on top of its Position. A positive value moves the badge to the right in both directions of writing. |
| OffsetY | `string?` | null | Moves the badge along the vertical axis by the given CSS length, on top of its Position. A positive value moves the badge down. |
| OnClick | `EventCallback<MouseEventArgs>` | | The click event of the badge, which also turns the badge into a keyboard-operable button. |
| Overlap | `bool` | false | Overlaps the badge on top of the child content. |
| Position | `BitPosition?` | null | The position of the badge. The Left/Right positions are physical, while the Start/End ones follow the direction of writing. |
| Pulse | `bool` | false | Renders an expanding ring around the badge to report that something is in progress. |
| Rel | `BitLinkRels?` | null | The relationship between the current document and the one the Href of the badge leads to. With no value of its own, a badge opening in a new browsing context gets rel="noopener" automatically. |
| Reversed | `bool` | false | Reverses the direction flow of the content of the badge, which puts the icon after the content. |
| Shape | `BitBadgeShape?` | null | The corner shape of the badge. |
| ShowZero | `bool` | true | Renders the badge when its content is the number zero. Turn it off for a counter that should disappear once it is emptied. Only a numeric Content counts as zero, and a string is rendered as it is. An icon or a ContentTemplate is content of its own, so it keeps the badge on the page and only the emptied number is taken off it. |
| Size | `BitSize?` | null | The size of badge, Possible values: Small | Medium | Large |
| Styles | `BitBadgeClassStyles?` | null | Custom CSS styles for different parts of the BitBadge. |
| Target | `string?` | null | The browsing context the Href of the badge is opened in, for example _blank. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the badge. It is rendered on the badge itself rather than on the child content underneath it. A badge whose Max has capped its count already spells that count out on hover, so this is only needed when there is something better to say than the figure itself. A title is not a text alternative, so what a screen reader should hear belongs in Description. |
| Variant | `BitVariant?` | null | The visual variant of the badge. |
| 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. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| 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. |
## 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. |
## Enums
### 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. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size badge. |
| Medium | 1 | The medium size badge. |
| Large | 2 | The large size badge. |
### BitBadgeShape Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Circular | 0 | Fully rounded corners, so a counter reads as a circle and a longer label as a pill. |
| Rounded | 1 | The corner radius the current theme gives to its controls. |
| Square | 2 | Square corners with no radius at all. |
### 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. |
### BitLinkRels Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Alternate | 1 | Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror) |
| Author | 2 | Provides a link to the author of the document. |
| Bookmark | 4 | Permanent URL used for bookmarking. |
| External | 8 | Indicates that the referenced document is not part of the same site as the current document. |
| Help | 16 | Provides a link to a help document. |
| License | 32 | Provides a link to licensing information for the document. |
| Next | 64 | Provides a link to the next document in the series. |
| NoFollow | 128 | Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link) |
| NoOpener | 256 | Requires that any browsing context created by following the hyperlink must not have an opener browsing context. |
| NoReferrer | 512 | Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink. |
| Prev | 1024 | The previous document in a selection. |
| Search | 2048 | Links to a search tool for the document. |
| Tag | 4096 | A tag (keyword) for the current document. |
| Me | 8192 | Indicates that the linked document represents the person who owns the current content. (used for identity verification) |
| Opener | 16384 | Requires that any browsing context created by following the hyperlink keeps its opener browsing context. (reverses the implicit noopener modern browsers apply to _blank targets) |
| PrivacyPolicy | 32768 | Links to the privacy policy that applies to the current document. (rendered as privacy-policy) |
| Sponsored | 65536 | Marks the link as an advertisement or paid placement, so search engines do not count it as an organic endorsement. |
| TermsOfService | 131072 | Links to the terms of service that apply to the current document. (rendered as terms-of-service) |
| Ugc | 262144 | Marks the link as user-generated content, like forum posts or comments, for search engines. |
### 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. |
## Sub Classes
### 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. |
| Content | `string?` | null | Custom CSS classes/styles for the content of the BitBadge. |
| Description | `string?` | null | Custom CSS classes/styles for the visually hidden description of the BitBadge. |
| LiveRegion | `string?` | null | Custom CSS classes/styles for the visually hidden live region of the BitBadge, rendered while Live is on and the badge is not a button. |
### 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. |
## Examples
\n**Basic**:
```razor
```
\n**Variant**:
```razor
```
\n**Shape**:
```razor
```
\n**Dot**:
```razor
```
\n**Max**:
```razor
```
\n**ShowZero**:
```razor
Remove one
Add one
```
```csharp
private int zeroCount;
```
\n**Content**:
```razor
99%
```
\n**Position**:
```razor
Position
> badgePositionList = Enum.GetValues(typeof(BitPosition))
.Cast()
.Select(enumValue => new BitDropdownItem
{
Value = enumValue,
Text = enumValue.ToString()
})
.ToList();
```
\n**Overlap**:
```razor
```
\n**Offset**:
```razor
```
\n**Bordered**:
```razor
```
\n**Pulse**:
```razor
```
\n**Standalone**:
```razor
Inbox
Alerts
Build server
Reports
```
\n**Hidden**:
```razor
```
```csharp
private bool hidden;
```
\n**Events**:
```razor
```
```csharp
private int counter;
```
\n**Link**:
```razor
Inbox
Receive a message
```
```csharp
private int unread = 3;
```
\n**Color**:
```razor
```
\n**External Icons**:
```razor
```
\n**Size**:
```razor
```
\n**Style & Class**:
```razor
Wider gap
```
\n**RTL**:
```razor
Backgrounds, foregrounds & borders:
Disabled:
Anchor