Button Module Name: ButtonModule

Module Name: ButtonModule

The Truly-UI buttons are styles for actions in forms, dialogs, and more with support for multiple sizes, states and many properties for customization

Showcase
Basic

<tl-button [text]="'Button'"></tl-button>
Addon - Icon Before
<tl-button [text]="'Ok'" [iconAddonBefore]="'fas fa-print'"></tl-button>
Color
<tl-button [text]="'Basic'" [color]="'basic'"></tl-button>
<tl-button [text]="'Primary'" [color]="'primary'"></tl-button>
<tl-button [text]="'Success'" [color]="'success'"></tl-button>
<tl-button [text]="'Danger'" [color]="'danger'"></tl-button>
<tl-button [text]="'Warning'" [color]="'warning'"></tl-button>
<tl-button [text]="'Information'" [color]="'information'"></tl-button>
Button Icon
<ng-template #icon>
  <div style="padding: 0 10px">
    <tl-icon [lib]="'fa'" [style]="'fas'">home</tl-icon>
  </div>
</ng-template>
<tl-button width="'40px'" [template]="icon" [color]="'basic'"></tl-button>
<tl-button width="'40px'" [template]="icon" [color]="'primary'"></tl-button>
<tl-button width="'40px'" [template]="icon" [color]="'success'"></tl-button>
<tl-button width="'40px'" [template]="icon" [color]="'danger'"></tl-button>
<tl-button width="'40px'" [template]="icon" [color]="'warning'"></tl-button>
<tl-button width="'40px'" [template]="icon" [color]="'information'"></tl-button>
Addon - Icon After
<tl-button [text]="'Button'" [iconAddonAfter]="'fa fa-home'"></tl-button>
Addon - Icon Before and After
<tl-button [text]="'Button'" [iconAddonBefore]="'fas fa-print'" [iconAddonAfter]="'fa fa-home'"></tl-button>
Icon Before Text Button
<tl-button [text]="'Button'" [iconBeforeText]="'fa fa-home'"></tl-button>
Icon After Text Button
<tl-button [text]="'Button'" [iconAfterText]="'fas fa-print'"></tl-button>
Width
<tl-button [text]="'Button'" [width]="'150px'"></tl-button>
Height
<tl-button [text]="'Button'" [height]="'40px'" [iconAddonAfter]="'fas fa-print'"></tl-button>
Disabled
<tl-button [text]="'Button'" [disabled]="true"></tl-button>
Custom Style
<tl-button [text]="'Button'"></tl-button>
Loading Button
<tl-button [isLoading]="isLoading" [width]="'200px'" [color]="'primary'" [text]="'Click Me'" [textLoading]="'Saving'" (click)="onClickButtonLoading()"></tl-button>
Many Properties
<tl-button [text]="'Button'" [iconAddonBefore]="'fas fa-print'" [iconAfterText]="'fa fa-home'"></tl-button>
Properties
NameTypeDefaultDescriptionOptions
colorstringbasicChanges the default color of the button. basic | primary | success | information | warning | danger | light | dark
disabledbooleanfalseDisables the button if set to true. true | false
heightstring39Button height. px | % | em
iconAddonAfterstringnullCreates an icon in the addon after the text button. ion ion-printer | fas fa-home | any
iconAddonBeforestringnullCreates an icon in the addon before the text button. ion ion-printer | fas fa-home | any
iconAfterTextstringnullCreates an icon after the text button. ion ion-printer | fas fa-home | any
iconBeforeTextstringnullCreates an icon before the text button. ion ion-printer | fas fa-home | any
isLoadingbooleanfalseWhen passed as TRUE the button is disable and activates an icon and load text. false | true
loaderColorstring#cccColor of loader. HEX
mdResultstringnullReturn value class when set inside a Modal Component. MRFREE | MRCUSTOM | MROK | MRCANCEL | MRABORT | MRRETRY | MRIGNORE | MRYES | MRNO | MRCLOSE
outlinebooleanfalseWhen passed as TRUE the button will be ghost mode, just the outline colors and font. false | true
templateTemplateRef<any>nullTemplateRef to be renderer inside of button TemplateRef<any>
textstringnullDisplays a text button. any text
textLoadingstringnullChange default text loading. Any Text
widthstring125pxButton width. px | % | em
Events
NameParametersDescription
selected
selected : Button Selected
Callback to invoke when toogle button.