Fluent Buttons for Angular Material

Microsoft Fluent Design System buttons components for Angular.

Implementation based and compatible with Angular Material.

Motivated by this closed issue in the angular/components repo.

👉 See it in action on Stackblitz

Installation

npm install ngx-fluent-buttons --save

Features

Even though this look and feel is achieved using Angular Material buttons and menus, a component that can be used as an in place replacement is not trivial. These components support all features from Angular Material button, using the same properties and directives.

• All variants: normal, raised, flat, stroked
• States: enabled, disabled
• Theming: Integrates with exisiting Material theme. Set color to primary, accent, warn
• Details: High quality components with ripples, positioning strategy etc.
• IE11 support

Quick code example:

<!-- the split directive makes it a split button as per Fluent Design specs -->
<ngx-fluent-button split mat-raised-button color="primary">
  <!-- split menu options -->
  <ng-container class="split-menu-content">
    <button mat-menu-item>
      <mat-icon>code</mat-icon> Contribute
    </button>
    <button mat-menu-item>
      <mat-icon>feedback</mat-icon> <span>Send Feedback</span>
    </button>
  </ng-container>
  <!-- main button icon (optional) and text -->
  <mat-icon>done</mat-icon> Accept Demo
</ngx-fluent-button>

Checkout the full samples page with all options