Button

The Button component allows users to commit a change or trigger an action via a single click or tap and is often found inside forms, dialogs, panels and/or pages.

Design Spec

Link to Button in Figma

Engineering Spec

Fluent WC3 Button has feature parity with the Fluent UI React 9 Button implementation but not direct parity.

Class: Button

Component Name

<fluent-button></fluent-button>

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
<Button>	<fluent-button>

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
iconis a slot	The default slot or start, and end	In FUIR9, icon is a slot. In the web components implementation, an icon can be passed into the default slot and paired with an icon-only attribute, or supplementally in the start and/or end slots
as	A separate web component for anchor implementations	In FUIR9, HTML is returned so interpolating tags in the virtual DOM doesn't present a problem. In WC's, we can't safely interpolate tags and the cost to provide two sets of API's, one form associated and one noticon is a slot. In the web components implementation, conditional rendering brings with it a cost as both templates need to be enumerated. Additionally, button is a form associated element whereas anchors are not. For this reason, we'll provide an "anchor-button" as a separate component.