Buttons

Clicked 0 times

Regular

<Btn (click)="onClick($event)">My Button</Btn>

Disabled

<Btn disabled="true" (click)="onClick($event)">My Button</Btn>

Depressed

<Btn depressed="true" (click)="onClick($event)">My Button</Btn>

Link

Link to icons 
<Btn href="/icons" (click)="onClick($event)">Link to icons</Btn>

Icon

<Btn icon="true" color="error" (click)="onClick($event)">
    <Icon name="mdi-heart" />
</Btn>
<Btn (click)="onClick($event)" color="warning">
    <Icon name="mdi-arrow-left" position="left" />Back
</Btn>
<Btn (click)="onClick($event)" color="error">Decline
    <Icon name="mdi-cancel" position="right" />
</Btn>

Block

<Btn block="true" (click)="onClick($event)">My Button</Btn>

Elevated

Apply elevation style. Available values: from 0 to 24. 

<Btn elevation="12">Level 12</Btn>

Colors

Apply color style. 

<Btn color="success">success</Btn>
<Btn color="primary">primary</Btn>
<Btn color="secondary">secondary</Btn>
<Btn color="accent">accent</Btn>
<Btn color="error">error</Btn>
<Btn color="warning">warning</Btn>
<Btn color="tertiary">tertiary</Btn>
<Btn color="info">info</Btn>

Outlined

<Btn outlined="true">Outlined</Btn>

Plain

<Btn plain="true">Plain</Btn>

Text

<Btn text="true">Text</Btn>

Tile

<Btn tile="true">Tile</Btn>

Rounded

<Btn rounded="true">Rounded</Btn>

Pill

<Btn color="primary" pill="true">X</Btn>
<Btn color="success" pill="true">S</Btn>
<Btn color="warning" pill="true">N</Btn>
<Btn color="primary" pill="true">L</Btn>
<Btn color="error" pill="true">
    <Icon name="mdi-domain" />
</Btn>

Loading state

<Btn (click)="$loading = !$loading" color="success" loading="$loading" disabled="$loading">
    Load data
</Btn>
<Btn (click)="$loading = !$loading" color="error" size="xlarge" icon="true" loading="$loading"
    disabled="$loading">
    <Icon name="mdi-call-split" />
</Btn>
<Btn (click)="$loading = !$loading" color="warning" pill="true" loading="$loading" disabled="$loading">
    <Icon name="mdi-dialpad" />
</Btn>
<Btn (click)="$loading = !$loading" outlined="true" loading="$loading" disabled="$loading">
    Outlined
</Btn>
<Btn (click)="$loading = !$loading" color="primary" pill="true" loading="$loading" disabled="$loading">
    L
</Btn>

Size

Apply size style. 

<Btn size="xsmall">xsmall</Btn>
<Btn size="small">small</Btn>
<Btn>normal</Btn>
<Btn size="large">large</Btn>
<Btn size="xlarge">xlarge</Btn>