Badge
This documentation provides a comprehensive reference for the
Badge component, guiding you through its configuration options.Screenshot #
Badge Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Gets or sets the content to be rendered within the component. | 1.7.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Color | BadgeColor | Secondary | Gets or sets the badge color. | 1.7.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| IndicatorType | BadgeIndicatorType | None | Gets or sets the badge indicator. | 1.7.0 | |
| Placement | BadgePlacement | None | Gets or sets the badge placement. | 1.7.0 | |
| Position | Position | None | Gets or sets the badge position. | 1.7.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 | |
| VisuallyHiddenText | string? | null | Gets or sets the visually hidden text. | 1.7.0 |
BadgeColor Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | No color styling is applied. | 1.7.0 |
| Primary | 1 | Applies the primary theme color. | 1.7.0 |
| Secondary | 2 | Applies the secondary theme color. | 1.7.0 |
| Success | 3 | Applies the success theme color. | 1.7.0 |
| Danger | 4 | Applies the danger theme color. | 1.7.0 |
| Warning | 5 | Applies the warning theme color. | 1.7.0 |
| Info | 6 | Applies the info theme color. | 1.7.0 |
| Light | 7 | Applies the light theme color. | 1.7.0 |
| Dark | 8 | Applies the dark theme color. | 1.7.0 |
BadgeIndicatorType Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | No indicator styling is applied. | 1.7.0 |
| RoundedPill | 1 | Applies a pill-shaped (fully rounded) indicator. | 1.7.0 |
| RoundedCircle | 2 | Applies a circular (fully rounded) indicator. | 1.7.0 |
BadgePlacement Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | No placement is applied. | 1.7.0 |
| TopLeft | 1 | Places the badge at the top-left. | 1.7.0 |
| TopCenter | 2 | Places the badge at the top-center. | 1.7.0 |
| TopRight | 3 | Places the badge at the top-right. | 1.7.0 |
| MiddleLeft | 4 | Places the badge at the middle-left. | 1.7.0 |
| MiddleCenter | 5 | Places the badge at the middle-center. | 1.7.0 |
| MiddleRight | 6 | Places the badge at the middle-right. | 1.7.0 |
| BottomLeft | 7 | Places the badge at the bottom-left. | 1.7.0 |
| BottomCenter | 8 | Places the badge at the bottom-center. | 1.7.0 |
| BottomRight | 9 | Places the badge at the bottom-right. | 1.7.0 |
Position Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | No position will be applied to an element. | 1.7.0 |
| Static | 1 | The element is positioned according to the normal flow of the document. | 1.7.0 |
| Relative | 2 | The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. | 1.7.0 |
| Absolute | 3 | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. | 1.7.0 |
| Fixed | 4 | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. | 1.7.0 |
| Sticky | 5 | The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. | 1.7.0 |
