fast-badge

The fast-badge component is used to highlight an item and attract attention or flag status.

Usage

The fill and color attributes of the badge create CSS custom properties which can be used to style the control.

Example custom property map

fast-badge {
--badge-fill-primary: #00FF00;
--badge-fill-danger: #FF0000;
--badge-color-light: #FFFFFF;
--badge-color-dark: #000000;
}
Live Editor
Result
Danger
note

In addition to the color map support detailed above, the fast-badge from the Microsoft component implementation (@fluentui/web-components) includes an attribute to set default appearances which ensure WCAG 2.1 AA contrast requirements.

Applying custom styles

import { customElement } from "@microsoft/fast-element";
import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation";
import { BadgeStyles as styles } from "./badge.styles";
@customElement({
name: "fast-badge",
template,
styles,
})
export class FASTBadge extends Badge {}