Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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
Please see the Blazor documentation and demo site for more information.