Skip to main content


As defined by the W3C:

A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

fast-button is a web component implementation of an HTML button element. The fast-components button supports several visual appearances (accent, lightweight, neutral, outline, stealth).


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


Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

Create your own design#

import {    Button,    buttonTemplate as template,} from "@microsoft/fast-foundation";import { buttonStyles as styles } from "./my-button.styles";
export const myButton = Button.compose({    baseName: "button",    template,    styles,    shadowOptions: {        delegatesFocus: true,    },});

This component is built with the expectation that focus is delegated to the button element rendered into the shadow DOM.

Additional resources#