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

npm install ngx-fluent-buttons --save

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

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