Skip to main content


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


import {    provideFASTDesignSystem,    fastBadge} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastBadge()    );


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

fast-badge {    --badge-fill-primary: #00FF00;    --badge-fill-danger: #FF0000;    --badge-color-light: #FFFFFF;    --badge-color-dark: #000000;}
Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

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.

Create your own design#

import { Badge, badgeTemplate as template } from "@microsoft/fast-foundation";import { badgeStyles as styles } from "./my-badge.styles";
export const myBadge = Badge.compose({    baseName: "badge",    template,    styles,});

Additional resources#