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
Name | Type | Default | Description | Options |
---|---|---|---|---|
color | string | basic | Changes the default color of the button. | basic | primary | success | information | warning | danger | light | dark |
disabled | boolean | false | Disables the button if set to true. | true | false |
height | string | 39 | Button height. | px | % | em |
iconAddonAfter | string | null | Creates an icon in the addon after the text button. | ion ion-printer | fas fa-home | any |
iconAddonBefore | string | null | Creates an icon in the addon before the text button. | ion ion-printer | fas fa-home | any |
iconAfterText | string | null | Creates an icon after the text button. | ion ion-printer | fas fa-home | any |
iconBeforeText | string | null | Creates an icon before the text button. | ion ion-printer | fas fa-home | any |
isLoading | boolean | false | When passed as TRUE the button is disable and activates an icon and load text. | false | true |
loaderColor | string | #ccc | Color of loader. | HEX |
mdResult | string | null | Return value class when set inside a Modal Component. | MRFREE | MRCUSTOM | MROK | MRCANCEL | MRABORT | MRRETRY | MRIGNORE | MRYES | MRNO | MRCLOSE |
outline | boolean | false | When passed as TRUE the button will be ghost mode, just the outline colors and font. | false | true |
template | TemplateRef<any> | null | TemplateRef to be renderer inside of button | TemplateRef<any> |
text | string | null | Displays a text button. | any text |
textLoading | string | null | Change default text loading. | Any Text |
width | string | 125px | Button width. | px | % | em |
Events
Name | Parameters | Description |
---|---|---|
selected | selected : Button Selected | Callback to invoke when toogle button. |