Use mat-button in simple snack bar.

Author: josephperrott

src/lib/snack-bar/simple-snack-bar.html

@@ -1,6 +1,6 @@
 {{data.message}}
 
-<button
-  class="mat-simple-snackbar-action"
-  *ngIf="hasAction"
-  (click)="action()">{{data.action}}</button>
+<div class="mat-simple-snackbar-action">
+  <button mat-button *ngIf="hasAction"
+          (click)="action()">{{data.action}}</button>
+</div>

src/lib/snack-bar/simple-snack-bar.scss

@@ -2,7 +2,7 @@
 @import '../core/style/button-common';
 @import '../core/style/list-common';
 
-$mat-snack-bar-button-margin: 48px !default;
+$mat-snack-bar-button-margin: 8px !default;
 
 .mat-simple-snackbar {
   display: flex;
@@ -11,14 +11,19 @@ $mat-snack-bar-button-margin: 48px !default;
 }
 
 .mat-simple-snackbar-action {
-  @include mat-button-reset;
-
-  background: none;
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
-  margin-left: $mat-snack-bar-button-margin;
+  justify-content: space-around;
+  margin: -8px 0 -8px $mat-snack-bar-button-margin;
+
+  button {
+    flex: 1;
+    max-height: 36px;
+  }
 
   [dir='rtl'] & {
-    margin-right: $mat-snack-bar-button-margin;
     margin-left: 0;
+    margin-right: $mat-snack-bar-button-margin;
   }
 }

src/lib/snack-bar/snack-bar-module.ts

@@ -12,6 +12,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
 import {MatCommonModule} from '@angular/material/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatSnackBar} from './snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {SimpleSnackBar} from './simple-snack-bar';
@@ -22,6 +23,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
     OverlayModule,
     PortalModule,
     CommonModule,
+    MatButtonModule,
     MatCommonModule,
   ],
   exports: [MatSnackBarContainer, MatCommonModule],