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>

<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

Name	Module	Package
FormAssociatedButton	/src/button/button.form-associated.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
autofocus	public	boolean		Determines if the element should receive document focus on page load.
formId	public	string		The id of a form to associate the element to.
formaction	public	string		See <button> element for more details.
formenctype	public	string		See <button> element for more details.
formmethod	public	string		See <button> element for more details.
formnovalidate	public	boolean		See <button> element for more details.
formtarget	public	"_self" or "_blank" or "_parent" or "_top"		See <button> element for more details.
type	public	"submit" or "reset" or "button"		The button type.
defaultSlottedContent	public	HTMLElement[]		Default slotted content
control	public	HTMLButtonElement
proxy					FormAssociatedButton
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets 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
styles	public	ElementStyles or void or null		Sets 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

Name	Privacy	Description	Parameters	Return	Inherited From
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
	autofocus
form	formId
formaction	formaction
formenctype	formenctype
formmethod	formmethod
	formnovalidate
formtarget	formtarget
type	type

CSS Parts

Name	Description
control	The button element
content	The element wrapping button content

Slots

Name	Description
start	Content which can be provided before the button content
end	Content which can be provided after the button content
	The default slot for button content

---

class: DelegatesARIAButton

Fields

Name	Privacy	Type	Default	Description	Inherited From
ariaExpanded	public	"true" or "false" or string or null		See https://www.w3.org/WAI/PF/aria/roles#button for more information
ariaPressed	public	"true" or "false" or "mixed" or string or null		See https://www.w3.org/WAI/PF/aria/roles#button for more information

Attributes

Name	Field	Inherited From
aria-expanded	ariaExpanded
aria-pressed	ariaPressed

---

Additional resources

• Component explorer examples
• Component technical specification
• W3C Component Aria Practices
• Open UI Analysis