Admin CSS Styles ​

All Bootstrap 4 CSS styles and classes are available in the LUYA admin UI. On top of this LUYA provides generic CSS classes for buttons with predefined icons and colors.

Buttons ​

The Bootstrap 4 btn class is extended by some predefined colors which are assigned to specific function (e.g. save, delete, abort). The following classes are available in the whole admin UI:

<button type="button" class="btn btn-save">Save</button>
<button type="button" class="btn btn-delete">Delete</button>
<button type="button" class="btn btn-cancel">Cancel</button>
<button type="button" class="btn btn-edit">Edit</button>
<button type="button" class="btn btn-add">Add</button>
<button type="button" class="btn btn-help">Help</button>
<button type="button" class="btn btn-download">Download</button>
<button type="button" class="btn btn-upload">Upload</button>
<button type="button" class="btn btn-config">Configuration</button>

You can combine the btn class with predefined icons, e.g. the use icons can be achieved by simply adding the CSS class btn-icon to the above listed button and the related icon will appear.

<button type="button" class="btn btn-save btn-icon">Save</button>

Please keep in mind that <input type="button" class="btn btn-icon btn-save" value="Button label" /> does not work because input fields do not support the pseudo CSS class :after. So use the button HTML element or something else instead of input.

If you would like to display a button with a generic predefined icon use btn-icon without a defined class:

<button type="button" class="btn btn-icon"><i class="material-icons">check</i>OK</button>

If you want a button btn-icon without a background simply add btn-link:

<button type="button" class="btn btn-icon btn-link"><i class="material-icons">check</i>Link</button>

Below some example combinations:

<button type="button" class="btn btn-icon btn-save">Save button with icon and text</button>
<button type="button" class="btn btn-cancel">Cancel button without icon</button>
<button type="button" class="btn btn-icon btn-delete"></button> // Delete button without label but predefined icon and colors.

Icons ​

Below, the table shows you which icon stands for what. The full set of usable icons is available under https://material.io/icons.