Leonardo UI

Supported Components

Name Code Example
LUI Button 
<lui-button>Default</lui-button>
 Default
LUI Button (Success) 
<lui-button x-variant="success">Success</lui-button>
 Success
LUI Button (Warning) 
<lui-button x-variant="warning">Warning</lui-button>
 Warning
LUI Button (Error) 
<lui-button x-variant="error">Error</lui-button>
 Error
LUI Button group 
<div class="lui-buttongroup">
    <button class="lui-button">
        First button
    </button>
    <button class="lui-button">
        Second button
    </button>
    <button class="lui-button">
        Third button
    </button>
</div>
LUI Checkbox 
<label class="lui-checkbox">
    <input class="lui-checkbox__input" type="checkbox" />
    <div class="lui-checkbox__check-wrap">
        <span class="lui-checkbox__check"></span>
        <span class="lui-checkbox__check-text">Label</span>
    </div>
</label>
LUI Input field 
<input class="lui-input"/>
LUI Input group 
<div class="lui-input-group">
    <button class="lui-input-group__item  lui-input-group__button  lui-button">
        <span class="lui-button__icon  lui-icon  lui-icon--expression"></span>
    </button>
    <input class="lui-input-group__item  lui-input-group__input  lui-input"/>
    <button class="lui-input-group__item  lui-input-group__button  lui-button">
        <span class="lui-button__icon  lui-icon  lui-icon--expression"></span>
    </button>
</div>
LUI Radio button 
<label class="lui-radiobutton">
    <input class="lui-radiobutton__input" type="radio" name="myradio" value="1" checked>
    <div class="lui-radiobutton__radio-wrap">
        <span class="lui-radiobutton__radio"></span>
        <span class="lui-radiobutton__radio-text">First button</span>
    </div>
</label>
LUI Select 
<lui-select x-model="value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</lui-select>
LUI Switch 
<div class="lui-switch">
    <label class="lui-switch__label" >
        <input type="checkbox" class="lui-switch__checkbox">
        <span class="lui-switch__span">
            <div class="lui-switch__inner"></div>
            <div class="lui-switch__switch" ></div>
        </span>
    </label>
</div>

Leonardo UI Icons

sheet

<span class="lui-icon lui-icon--sheet"></span>

object

<span class="lui-icon lui-icon--object"></span>

image

<span class="lui-icon lui-icon--image"></span>

clear-selections

<span class="lui-icon lui-icon--clear-selections"></span>

selections-tool

<span class="lui-icon lui-icon--selections-tool"></span>

bookmark

<span class="lui-icon lui-icon--bookmark"></span>

back

<span class="lui-icon lui-icon--back"></span>

forward

<span class="lui-icon lui-icon--forward"></span>

history

<span class="lui-icon lui-icon--history"></span>

help

<span class="lui-icon lui-icon--help"></span>

info

<span class="lui-icon lui-icon--info"></span>

toggle-left

<span class="lui-icon lui-icon--toggle-left"></span>

toggle-right

<span class="lui-icon lui-icon--toggle-right"></span>

selections-reload

<span class="lui-icon lui-icon--selections-reload"></span>

text

<span class="lui-icon lui-icon--text"></span>

group

<span class="lui-icon lui-icon--group"></span>

search

<span class="lui-icon lui-icon--search"></span>

zoom-in

<span class="lui-icon lui-icon--zoom-in"></span>

zoom-out

<span class="lui-icon lui-icon--zoom-out"></span>

selections-back

<span class="lui-icon lui-icon--selections-back"></span>

selections-forward

<span class="lui-icon lui-icon--selections-forward"></span>

export

<span class="lui-icon lui-icon--export"></span>

lock

<span class="lui-icon lui-icon--lock"></span>

unlock

<span class="lui-icon lui-icon--unlock"></span>

database

<span class="lui-icon lui-icon--database"></span>

calendar

<span class="lui-icon lui-icon--calendar"></span>

field

<span class="lui-icon lui-icon--field"></span>

expression

<span class="lui-icon lui-icon--expression"></span>

library

<span class="lui-icon lui-icon--library"></span>

debug

<span class="lui-icon lui-icon--debug"></span>

script-ok

<span class="lui-icon lui-icon--script-ok"></span>

grid-large

<span class="lui-icon lui-icon--grid-large"></span>

star

<span class="lui-icon lui-icon--star"></span>

print

<span class="lui-icon lui-icon--print"></span>

remove

<span class="lui-icon lui-icon--remove"></span>

handle

<span class="lui-icon lui-icon--handle"></span>

handle-horizontal

<span class="lui-icon lui-icon--handle-horizontal"></span>

menu

<span class="lui-icon lui-icon--menu"></span>

list

<span class="lui-icon lui-icon--list"></span>

unordered-list

<span class="lui-icon lui-icon--unordered-list"></span>

bar-chart

<span class="lui-icon lui-icon--bar-chart"></span>

bar-chart-horizontal

<span class="lui-icon lui-icon--bar-chart-horizontal"></span>

clock

<span class="lui-icon lui-icon--clock"></span>

line-chart

<span class="lui-icon lui-icon--line-chart"></span>

pie-chart

<span class="lui-icon lui-icon--pie-chart"></span>

gauge-chart

<span class="lui-icon lui-icon--gauge-chart"></span>

kpi

<span class="lui-icon lui-icon--kpi"></span>

scatter-chart

<span class="lui-icon lui-icon--scatter-chart"></span>

map

<span class="lui-icon lui-icon--map"></span>

puzzle

<span class="lui-icon lui-icon--puzzle"></span>

table

<span class="lui-icon lui-icon--table"></span>

pivot-table

<span class="lui-icon lui-icon--pivot-table"></span>

filterpane

<span class="lui-icon lui-icon--filterpane"></span>

treemap

<span class="lui-icon lui-icon--treemap"></span>

combo-chart

<span class="lui-icon lui-icon--combo-chart"></span>

plus

<span class="lui-icon lui-icon--plus"></span>

minus

<span class="lui-icon lui-icon--minus"></span>

triangle-top

<span class="lui-icon lui-icon--triangle-top"></span>

triangle-bottom

<span class="lui-icon lui-icon--triangle-bottom"></span>

triangle-left

<span class="lui-icon lui-icon--triangle-left"></span>

triangle-right

<span class="lui-icon lui-icon--triangle-right"></span>

run-script

<span class="lui-icon lui-icon--run-script"></span>

tick

<span class="lui-icon lui-icon--tick"></span>

cogwheel

<span class="lui-icon lui-icon--cogwheel"></span>

settings

<span class="lui-icon lui-icon--settings"></span>

data-model

<span class="lui-icon lui-icon--data-model"></span>

script

<span class="lui-icon lui-icon--script"></span>

sense

<span class="lui-icon lui-icon--sense"></span>

cut

<span class="lui-icon lui-icon--cut"></span>

copy

<span class="lui-icon lui-icon--copy"></span>

paste

<span class="lui-icon lui-icon--paste"></span>

align-left

<span class="lui-icon lui-icon--align-left"></span>

align-center

<span class="lui-icon lui-icon--align-center"></span>

align-right

<span class="lui-icon lui-icon--align-right"></span>

bold

<span class="lui-icon lui-icon--bold"></span>

italic

<span class="lui-icon lui-icon--italic"></span>

underline

<span class="lui-icon lui-icon--underline"></span>

select-alternative

<span class="lui-icon lui-icon--select-alternative"></span>

select-possible

<span class="lui-icon lui-icon--select-possible"></span>

select-excluded

<span class="lui-icon lui-icon--select-excluded"></span>

select-all

<span class="lui-icon lui-icon--select-all"></span>

camera

<span class="lui-icon lui-icon--camera"></span>

slide-show

<span class="lui-icon lui-icon--slide-show"></span>

palette

<span class="lui-icon lui-icon--palette"></span>

shapes

<span class="lui-icon lui-icon--shapes"></span>

effects

<span class="lui-icon lui-icon--effects"></span>

file

<span class="lui-icon lui-icon--file"></span>

expand

<span class="lui-icon lui-icon--expand"></span>

collapse

<span class="lui-icon lui-icon--collapse"></span>

bin

<span class="lui-icon lui-icon--bin"></span>

link

<span class="lui-icon lui-icon--link"></span>

pivot

<span class="lui-icon lui-icon--pivot"></span>

reload

<span class="lui-icon lui-icon--reload"></span>

add

<span class="lui-icon lui-icon--add"></span>

edit

<span class="lui-icon lui-icon--edit"></span>

lasso

<span class="lui-icon lui-icon--lasso"></span>

key

<span class="lui-icon lui-icon--key"></span>

box

<span class="lui-icon lui-icon--box"></span>

home

<span class="lui-icon lui-icon--home"></span>

person

<span class="lui-icon lui-icon--person"></span>

stream

<span class="lui-icon lui-icon--stream"></span>

next

<span class="lui-icon lui-icon--next"></span>

grid

<span class="lui-icon lui-icon--grid"></span>

cloud

<span class="lui-icon lui-icon--cloud"></span>

more

<span class="lui-icon lui-icon--more"></span>

import

<span class="lui-icon lui-icon--import"></span>

folder

<span class="lui-icon lui-icon--folder"></span>

auto-layout

<span class="lui-icon lui-icon--auto-layout"></span>

toggle-bottom

<span class="lui-icon lui-icon--toggle-bottom"></span>

drop

<span class="lui-icon lui-icon--drop"></span>

play

<span class="lui-icon lui-icon--play"></span>

tag

<span class="lui-icon lui-icon--tag"></span>

close

<span class="lui-icon lui-icon--close"></span>

direct-discovery

<span class="lui-icon lui-icon--direct-discovery"></span>

warning

<span class="lui-icon lui-icon--warning"></span>

warning-triangle

<span class="lui-icon lui-icon--warning-triangle"></span>

share

<span class="lui-icon lui-icon--share"></span>

top

<span class="lui-icon lui-icon--top"></span>

low-resolution

<span class="lui-icon lui-icon--low-resolution"></span>

high-resolution

<span class="lui-icon lui-icon--high-resolution"></span>

view

<span class="lui-icon lui-icon--view"></span>

control

<span class="lui-icon lui-icon--control"></span>

code

<span class="lui-icon lui-icon--code"></span>

upload

<span class="lui-icon lui-icon--upload"></span>

repair

<span class="lui-icon lui-icon--repair"></span>

split

<span class="lui-icon lui-icon--split"></span>

up-down

<span class="lui-icon lui-icon--up-down"></span>

disconnect

<span class="lui-icon lui-icon--disconnect"></span>

photo-library

<span class="lui-icon lui-icon--photo-library"></span>

import

<span class="lui-icon lui-icon--import"></span>

application

<span class="lui-icon lui-icon--application"></span>

new-tab

<span class="lui-icon lui-icon--new-tab"></span>

ascending

<span class="lui-icon lui-icon--ascending"></span>

descending

<span class="lui-icon lui-icon--descending"></span>

arrow-up

<span class="lui-icon lui-icon--arrow-up"></span>

arrow-down

<span class="lui-icon lui-icon--arrow-down"></span>

arrow-right

<span class="lui-icon lui-icon--arrow-right"></span>

arrow-left

<span class="lui-icon lui-icon--arrow-left"></span>

sync

<span class="lui-icon lui-icon--sync"></span>

draggable

<span class="lui-icon lui-icon--draggable"></span>