Version:

Install ​

shell
npm i @mate-angular/button

Import ​

typescript
import { MateButtonComponent } from '@mate-angular/button';

Variants ​

Primary ​

html
<mate-button-ng theme="primary" (click)="onClick($event)">Primary</mate-button-ng>

Secondary ​

html
<mate-button-ng>Secondary</mate-button-ng>

Tertiary ​

html
<mate-button-ng theme="tertiary">Tertiary</mate-button-ng>

Success ​

html
<mate-button-ng theme="success">Success</mate-button-ng>

Error / Danger ​

html
<mate-button-ng theme="error">Error</mate-button-ng>

Disabled ​

html
<mate-button-ng [disabled]="true">Disabled</mate-button-ng>

Icon ​

html
<mate-button-ng theme="icon">
  <span theme="icon" role="img" aria-label="add aria label">add</span>
</mate-button-ng>

WARNING

Do not use aria labels on icon and button at the same time, as they both will be read out! Same goes for grid cells, when they contain actions.

Prefix Icon ​

html
<mate-button-ng>
  <span theme="icon" role="img" slot="prefix">chevron_left</span>
  <span>Backward</span>
</mate-button-ng>

Suffix Icon ​

html
<mate-button-ng>
  <span>Forward</span>
  <span theme="icon" role="img" slot="suffix">chevron_right</span>
</mate-button-ng>

Icon unstyled ​

html
<mate-button-ng theme="icon unstyled">
  <span theme="icon" role="img">add</span>
</mate-button-ng>