Skip to main content

fast-badge

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

Setup

import {
provideFASTDesignSystem,
fastBadge
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastBadge()
);

Usage

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
Result
Loading...

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,
});

API

class: Badge

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
fillpublicstringIndicates the badge should have a filled style.
colorpublicstringIndicates the badge should have a filled style.
circularpublicbooleanIndicates the element should be circular
generateBadgeStylepublic
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
fillfill
colorcolor
circular

CSS Parts

NameDescription
controlThe element representing the badge, which wraps the default slot

Slots

NameDescription
The default slot for the badge

Additional resources