Button

There's a lot of ways to create a Button using Truly UI. Below, are some of those.

Basic

Addon - Icon Before

Addon - Icon After

Addon - Icon Before and After

Toggle

Icon Before Text Button

Icon After Text Button

Icon After and Before Text Button

Width

Height

Disabled

Custom Style

Many Properties

Properties

Name	Type	Default	Description	Options
{{ item.name }}	{{ item.type }}	`{{ item.default }}`	{{ item.description }}	`{{ item.options }}`

Examples

Basic

Addon - Icon Before

Addon - Icon After

Addon - Icon Before and After

Toggle

Icon Before Text Button

Icon After Text Button

Icon Before and After Text Button

Width

Height

Disabled

Custom Style

Many Properties

<tl-button
        [text]="'Button'"
        [buttonClass]="'buttonClass2'"
        [iconAddonBefore]="'ion-printer'"
        [buttonAddonBeforeClass]="'buttonAddonBeforeClass2'"
        [iconRightTextButton]="'fa fa-home'"
        [toggleClass]="'toggleClass2'"
        [toggle]="true"
        [iconAfterText]="'fa fa-home'"
        [iconAfterTextClass]="'textIconAfterClass2'">
      </tl-button>

.buttonClass2:hover {
        background-color: #1b8ad6 !important;
      }

.buttonClass2:active, .toggleClass2 {
        background-color: #1b86d0 !important;
      }

.buttonAddonBeforeClass2 {
        background-color: #FFF !important;
        color: #1B95E0 !important;
        border-right: 1px solid #1778b9 !important;
      }

.textIconAfterClass2 {
        color: #02f5f3 !important;
      }
      </style>