fast-button

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).

Usage

Live Editor
Result
Submit

Applying custom styles

import { customElement } from "@microsoft/fast-element";
import { Button, ButtonTemplate as template } from "@microsoft/fast-foundation";
import { ButtonStyles as styles } from "./button.styles";
// Button
@customElement({
name: "fast-button",
template,
styles,
shadowOptions: {
delegatesFocus: true,
},
})
export class FASTButton extends Button {}
note

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