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