Ant Design Blazor
Badge
Small numerical value or status descriptor for UI elements.
When To Use
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
Examples
Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.
The badge can be wrapped with a tag to make it linkable.
Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
Use ribbon badge.
Used in standalone when children is empty.
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
The count will be animated as it changes.
Standalone badge with status.
Set size of numeral Badge.
Badge API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Color | ParameterCustomize Badge status dot color. Usage of this parameter will make the badge a status dot. | String | -- |
| PresetColor | ParameterSet Badge status dot to a preset color. Usage of this parameter will make the badge a status dot. | PresetColor? | -- |
| Count | ParameterNumber to show in badge | Int32? | -- |
| CountTemplate | ParameterTemplate to show in place of Count | RenderFragment | -- |
| Dot | ParameterWhether to display a dot instead of count | Boolean | false |
| Offset | ParameterSet offset of the badge dot, like (left, top) | ValueTuple<Int32, Int32> | -- |
| OverflowCount | ParameterMax count to show | Int32 | 99 |
| ShowZero | ParameterWhether to show badge when count is zero | Boolean | false |
| Status | ParameterSet Badge dot to a status color. Usage of this parameter will make the badge a status dot. | String | -- |
| Text | ParameterThe display text next to the status dot | String | -- |
| Title | ParameterText to show when hovering over the badge. Defaults to the value of Count | String | -- |
| Size | ParameterSize of the badge | String | -- |
| ChildContent | ParameterWrapping this item. | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
BadgeRibbon API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Color | ParameterCustomize ribbon color | String | -- |
| Text | ParameterText string of ribbon. | String | -- |
| TextTemplate | ParameterText content of the ribbon. Takes priority over AntDesign.BadgeRibbon.Text |
RenderFragment | -- |
| Placement | ParameterSet placement of ribbon. | String | end |
| ChildContent | ParameterWrapping this item. | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |