Skip to main content
Version: 1.x

fast-button

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

Setup

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

provideFASTDesignSystem()
.register(
fastButton()
);

Usage

Live Editor
<fast-button appearance="primary">Submit</fast-button>
Result
Loading...

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

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

API

class: Button

Superclass

NameModulePackage
FormAssociatedButton/src/button/button.form-associated.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
autofocuspublicbooleanDetermines if the element should receive document focus on page load.
formIdpublicstringThe id of a form to associate the element to.
formactionpublicstringSee <button> element for more details.
formenctypepublicstringSee <button> element for more details.
formmethodpublicstringSee <button> element for more details.
formnovalidatepublicbooleanSee <button> element for more details.
formtargetpublic"_self" or "_blank" or "_parent" or "_top"See <button> element for more details.
typepublic"submit" or "reset" or "button"The button type.
defaultSlottedContentpublicHTMLElement[]Default slotted content
controlpublicHTMLButtonElement
proxyFormAssociatedButton
$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
autofocus
formformId
formactionformaction
formenctypeformenctype
formmethodformmethod
formnovalidate
formtargetformtarget
typetype

CSS Parts

NameDescription
controlThe button element
contentThe element wrapping button content

Slots

NameDescription
startContent which can be provided before the button content
endContent which can be provided after the button content
The default slot for button content

class: DelegatesARIAButton

Fields

NamePrivacyTypeDefaultDescriptionInherited From
ariaExpandedpublic"true" or "false" or string or nullSee https://www.w3.org/WAI/PF/aria/roles#button for more information
ariaPressedpublic"true" or "false" or "mixed" or string or nullSee https://www.w3.org/WAI/PF/aria/roles#button for more information

Attributes

NameFieldInherited From
aria-expandedariaExpanded
aria-pressedariaPressed

Additional resources