Button

Styles

There are several different button styles :

• The basic (default) lui button

• The simple-link-lookalike lui flat button

• The modern looking lui wired {colorName} button

• The cool looking lui filling {colorName} button

• The bonus fake one, which a little peculiar : it makes an element the exact same size than a LuccaUI button without making it behave like a button.

Sizes

The button element supports sizes defined in the @lui_sizes variable in your {yourThemeDirectory}/definitions/sizes.overrides.less.

Icon

Of course, all LuccaUI button(s) support LuccaUI icons. To display an icon on the right-side of a button, just write down <button class="lui button wired secondary">Edit<i class="lui icon edit right"></i></button>. More info on icons here.

Colors

The button element supports coloring. Adding one of the supported colors name to it as a class will thus paint it in this color.

Thus, to have a button be in the primary color, just add the primary class to it ; and same goes with any color defined in {yourThemeDirectory}/definitions/colors.overrides.less.