Badge
The <FluentBadge> component is used to highlight an item and attract attention or flag status.
<FluentBadge> wraps the <fluent-badge> element, a web component implementation of a badge leveraging the Fluent UI design system.
Examples
Appearances
Clicking the 'Lightweight' badge will trigger the OnClick event. Clicking the dismiss icon on the 'Bigger' badge will trigger the OnDismissClick event. See the 'Console log' for the generated output.
Download:
Circular
Download:
With custom CSS for Fill and Highlight
The Fill and Color values can be defined as CSS variables with 'highlight' and 'lowlight' variants:
fluent-badge {
--badge-fill-highlight: #ffd800;
--badge-fill-lowlight: #333;
--badge-color-highlight: #000;
--badge-color-lowlight: #fff;
}
Download:
In a slot
Download:
Documentation
FluentBadge Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | Appearance? | Neutral | Gets or sets the visual appearance. See AppearancePossible values are Accent, Neutral (default) or Lightweight |
BackgroundColor | string? | Gets or sets the background color. | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Circular | bool | False | Gets or sets a value indicating whether the badge is rendered circular. |
Color | string? | Gets or sets the color. | |
DismissIcon | Icon? | Gets or sets the icon to be displayed when the badge is cancellable. By default, a small cross icon is displayed. | |
DismissTitle | string? | Gets or sets the tooltip to display when hovering over the FluentBadge.DismissIcon icon. | |
Fill | string? | Gets or sets the background color based on fill value. | |
Height | string? | Gets or sets the height of the component. | |
Width | string? | Gets or sets the width of the component. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnClick | EventCallback<MouseEventArgs> | Event callback for when the badge is clicked. |
OnDismissClick | EventCallback<MouseEventArgs> | Event callback for when the badge FluentBadge.DismissIcon icon is clicked. |