Button

Type: DefaultComponent

Overrides the default button's style.

Demo Scene

Usage

<!-- Apply Style -->
<engine:Button class="btn" />
<!-- With Size -->
<engine:Button class="btn btn-lg" />
<!-- With Color -->
<engine:Button class="btn red" />
<!-- With Size and Color -->
<engine:Button class="btn btn-xl violet" />
<!-- GHOST -->
<engine:Button class="btn btn-xl violet ghost" />
<!-- MASKED -->
<engine:Button class="btn btn-xl violet masked" />

Ghost: A class which gives the button a transparent background. Upon hover and focus states, the background changes to a semi-transparent black color and the text color changes to be whichever color class the button was given.

Masked: A class which gives the button a transparent background. Upon hover and focus states, the background changes to whichever color class the button was given and text color remains the same.

Sizes

You can add these classes to change the default size.

Format: btn-{size} Options: sm for small, lg for large, xl for xLarge

Colors

You can add a color code class to change the default color. There is no need for btn prefix. For color list, see Colors.