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