Button

The fluent-button is a web component implementation of an HTML button element. The fluent-components button supports several visual appearances (accent, lightweight, neutral, outline, stealth).

fluent-button

Setup

Basic Setup

TypeScript

import {
    provideFluentDesignSystem,
    fluentButton
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentButton()
    );

Example

FluentButton

<FluentButton> wraps the <fluent-button> element, a web component implementation of an HTML button element leveraging the Fluent UI design system. The <FluentButton> component supports several visual appearances (accent, lightweight, neutral, outline, stealth).

Usage

razor

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentButton>Button</FluentButton>
<h4>disabled</h4>
<FluentButton Disabled="true">Button</FluentButton>
<h4>autofocus</h4>
<FluentButton Autofocus="true">Button</FluentButton>
<h4>On Click</h4>
<FluentButton @onclick="() => WasClicked()">Click me</FluentButton> 
@code {
    private void WasClicked() {
        // Do something
    }
}

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

Code in GitHub W3C Component Aria Practices