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 thebutton
HTML element or something else instead ofinput
.
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.
Description | Icon | Name |
---|---|---|
Upload icon | file_upload | file_upload |
Download icon | file_download | file_download |
Edit icon | edit | edit |
Add icon | add_box | add_box |
Add icon for button | add | add |
Delete icon | delete | delete |
Save / Confirm icon | check.png | check |
Abort / Clear icon | clear | clear |
Config icon | settings | settings |
Settings icon | more_vert | more_vert |
Visible icon | visibility | visibility |
Invisible icon | visibility_off | visibility_off |
Online icon | cloud_queue | cloud_queue |
Offline icon | cloud_off | cloud_off |
Sort icon | keyboard_arrow_down keyboard_arrow_up | keyboard_arrow_down / keyboard_arrow_up |
Folder icon | folder | folder |
Create folder icon | create_new_folder | create_new_folder |