Badge
The fluent-badge is used to highlight an item, attract attention or flag status.
fluent-badge
Setup
import {
provideFluentDesignSystem,
fluentBadge
} from "@fluentui/web-components";
provideFluentDesignSystem()
.register(
fluentBadge()
);
Usage
The fill and color attributes of the badge create CSS custom properties which can be used to style the control
fluent-badge {
--badge-fill-primary: #00FF00;
--badge-fill-danger: #FF0000;
--badge-color-light: #FFFFFF;
--badge-color-dark: #000000;
}
Example
FluentBadge
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.
Usage
@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentBadge>
Badge
</FluentBadge>
<h4>Lightweight</h4>
<FluentBadge Appearance="Appearance.Lightweight">
Badge
</FluentBadge>
<h4>Accent</h4>
<FluentBadge Appearance="Appearance.Accent">
Badge
</FluentBadge>
<h4>Neutral</h4>
<FluentBadge Appearance="Appearance.Neutral">
Badge
</FluentBadge>
Example
See the component in action with implementation examples at the Blazor demo site.