ipsos-components/src/demo-app/a11y/button/button-a11y.html

Material Design components for Angular

<div class="demo-button">
  <section>
    <h2>Button elements</h2>
    <p>Click on the buttons to increase the button counter.</p>
    <p>Current number of clicks: {{counter}}</p>
    <button mat-button (click)="increase()">Check</button>
    <button mat-raised-button (click)="increase()">Pitch</button>
    <button mat-fab (click)="increase()"
            aria-label="Activate floating action style button to increase the button counter">
      <mat-icon>plus_one</mat-icon>
    </button>
    <button mat-mini-fab (click)="increase()"
            aria-label="Mini floating action button to increase the button counter by 1">
      <mat-icon>plus_one</mat-icon>
    </button>
    <button mat-icon-button (click)="increase()"
            aria-label="Icon button to increase the button counter by 1">
      <mat-icon>plus_one</mat-icon>
    </button>
  </section>

  <section>
    <h2>Anchor elements</h2>
    <a href="http://www.google.com" mat-button color="primary">Google search</a>
    <a href="https://www.youtube.com/" mat-raised-button>YouTube</a>
    <a href="http://www.google.com" mat-fab
       aria-label="Activate floating action style google search link">
      <mat-icon>search</mat-icon>
    </a>
    <a href="http://www.google.com" mat-mini-fab
       aria-label="Activate mini floating action style google search link">
      <mat-icon>search</mat-icon>
    </a>
    <a href="http://www.google.com" mat-icon-button
       aria-label="Activate icon style google search link">
      <mat-icon>search</mat-icon>
    </a>
  </section>

  <section>
    <h2>Buttons in different colors</h2>
    <button mat-button color="primary" (click)="openSnackBar('Color is primary.')">Primary</button>
    <button mat-button color="accent" (click)="openSnackBar('Color is accent.')">Accent</button>
    <button mat-button color="warn" (click)="openSnackBar('Color is warn.')">Warn</button>
  </section>

  <section>
    <h2>Disabled button</h2>
    <p>The following "cancel" button is disabled</p>
    <button mat-button [disabled]="true">Cancel</button>
  </section>
</div>