Documentation

Buttons with icons

Description and example

\Bitrix\Main\UI\Extension::load("ui.buttons.icons");

This library is an addition to ui.buttons. It means, that modifier principles are the same as for main library.

Example. Code for buttons

looks as follows:

<!-- .ui-btn.ui-btn-icon-task:empty -->
<button class="ui-btn ui-btn-icon-task"></button>

<!-- .ui-btn.ui-btn-danger.ui-btn-icon-phone-down -->
<button class="ui-btn ui-btn-danger ui-btn-icon-phone-down">Button</button>

<!-- .ui-btn-split.ui-btn-primary.ui-btn-icon-setting -->
<div class="ui-btn-split ui-btn-primary ui-btn-icon-setting"> 
   <button class="ui-btn-main">Button</button> 
    <button class="ui-btn-menu"></button> 
</div>

Button with icon without text

When you need button only with icon, no space character inside the button, and the button is not a tag <input>. Otherwise, pseudo class :empty is not triggered, and the button will be displayed incorrectly visually.

<!-- .ui-btn.ui-btn-icon-add:empty -->
<button class="ui-btn ui-btn-icon-add"></button>

Modifier .ui-btn-icon-add.

List of icons

ButtonCode

<!-- .ui-btn.ui-btn-icon-add -->
<button class="ui-btn ui-btn-icon-add">.ui-btn-icon-add</button>

<!-- .ui-btn-split.ui-btn-icon-add -->
<div class="ui-btn-split ui-btn-icon-add"> 
    <button class="ui-btn-main">.ui-btn-icon-add</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-stop-->
<button class="ui-btn ui-btn-icon-stop">.ui-btn-icon-stop</button>

<!-- .ui-btn-split.ui-btn-icon-stop-->
<div class="ui-btn-split ui-btn-icon-stop"> 
    <button class="ui-btn-main">.ui-btn-icon-stop</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-start-->
<button class="ui-btn ui-btn-icon-start">.ui-btn-icon-start</button>

<!-- .ui-btn-split.ui-btn-icon-start-->
<div class="ui-btn-split ui-btn-icon-start"> 
    <button class="ui-btn-main">.ui-btn-icon-start</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-pause-->
<button class="ui-btn ui-btn-icon-pause">.ui-btn-icon-pause</button>

<!-- .ui-btn-split.ui-btn-icon-pause-->
<div class="ui-btn-split ui-btn-icon-pause"> 
    <button class="ui-btn-main">.ui-btn-icon-pause</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-setting-->
<button class="ui-btn ui-btn-icon-setting">.ui-btn-icon-setting</button>

<!-- .ui-btn-split.ui-btn-icon-setting-->
<div class="ui-btn-split ui-btn-icon-setting"> 
    <button class="ui-btn-main">.ui-btn-icon-setting</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-task-->
<button class="ui-btn ui-btn-icon-task">.ui-btn-icon-task</button>

<!-- .ui-btn-split.ui-btn-icon-task-->
<div class="ui-btn-split ui-btn-icon-task"> 
    <button class="ui-btn-main">.ui-btn-icon-task</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-info-->
<button class="ui-btn ui-btn-icon-info">.ui-btn-icon-info</button>

<!-- .ui-btn-split.ui-btn-icon-info-->
<div class="ui-btn-split ui-btn-icon-info"> 
    <button class="ui-btn-main">.ui-btn-icon-info</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-search-->
<button class="ui-btn ui-btn-icon-search">.ui-btn-icon-search</button>

<!-- .ui-btn-split.ui-btn-icon-search-->
<div class="ui-btn-split ui-btn-icon-search"> 
    <button class="ui-btn-main">.ui-btn-icon-search</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-follow-->
<button class="ui-btn ui-btn-icon-follow">.ui-btn-icon-follow</button>

<!-- .ui-btn-split.ui-btn-icon-follow-->
<div class="ui-btn-split ui-btn-icon-follow"> 
    <button class="ui-btn-main">.ui-btn-icon-follow</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-unfollow-->
<button class="ui-btn ui-btn-icon-unfollow">.ui-btn-icon-unfollow</button>

<!-- .ui-btn-split.ui-btn-icon-unfollow-->
<div class="ui-btn-split ui-btn-icon-unfollow"> 
    <button class="ui-btn-main">.ui-btn-icon-unfollow</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-print-->
<button class="ui-btn ui-btn-icon-print">.ui-btn-icon-print</button>

<!-- .ui-btn-split.ui-btn-icon-print-->
<div class="ui-btn-split ui-btn-icon-print"> 
    <button class="ui-btn-main">.ui-btn-icon-print</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-add-folder-->
<button class="ui-btn ui-btn-icon-add-folder">.ui-btn-icon-add-folder</button>

<!-- .ui-btn-split.ui-btn-icon-add-folder-->
<div class="ui-btn-split ui-btn-icon-add-folder"> 
    <button class="ui-btn-main">.ui-btn-icon-add-folder</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-list-->
<button class="ui-btn ui-btn-icon-list">.ui-btn-icon-list</button>

<!-- .ui-btn-split.ui-btn-icon-list-->
<div class="ui-btn-split ui-btn-icon-list"> 
    <button class="ui-btn-main">.ui-btn-icon-list</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-->
<button class="ui-btn ui-btn-icon-business">.ui-btn-icon-business</button>

<!-- .ui-btn-split.ui-btn-icon-business-->
<div class="ui-btn-split ui-btn-icon-business"> 
    <button class="ui-btn-main">.ui-btn-icon-business</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-confirm-->
<button class="ui-btn ui-btn-icon-business-confirm">.ui-btn-icon-business-confirm</button>

<!-- .ui-btn-split.ui-btn-icon-business-confirm-->
<div class="ui-btn-split ui-btn-icon-business-confirm"> 
    <button class="ui-btn-main">.ui-btn-icon-business-confirm</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-business-warning-->
<button class="ui-btn ui-btn-icon-business-warning">.ui-btn-icon-business-warning</button>

<!-- .ui-btn-split.ui-btn-icon-business-warning-->
<div class="ui-btn-split ui-btn-icon-business-warning"> 
    <button class="ui-btn-main">.ui-btn-icon-business-warning</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-camera-->
<button class="ui-btn ui-btn-icon-camera">.ui-btn-icon-camera</button>

<!-- .ui-btn-split.ui-btn-icon-camera-->
<div class="ui-btn-split ui-btn-icon-camera"> 
    <button class="ui-btn-main">.ui-btn-icon-camera</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-up-->
<button class="ui-btn ui-btn-icon-phone-up">.ui-btn-icon-phone-up</button>

<!-- .ui-btn-split.ui-btn-icon-phone-up-->
<div class="ui-btn-split ui-btn-icon-phone-up"> 
    <button class="ui-btn-main">.ui-btn-icon-phone-up</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-down-->
<button class="ui-btn ui-btn-icon-phone-down">.ui-btn-icon-phone-down</button>

<!-- .ui-btn-split.ui-btn-icon-phone-down-->
<div class="ui-btn-split ui-btn-icon-phone-down"> 
    <button class="ui-btn-main">.ui-btn-icon-phone-down</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-back-->
<button class="ui-btn ui-btn-icon-back">.ui-btn-icon-back</button>

<!-- .ui-btn-split.ui-btn-icon-back-->
<div class="ui-btn-split ui-btn-icon-back"> 
    <button class="ui-btn-main">.ui-btn-icon-back</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-edit-->
<button class="ui-btn ui-btn-icon-edit">.ui-btn-icon-edit</button>

<!-- .ui-btn-split.ui-btn-icon-edit-->
<div class="ui-btn-split ui-btn-icon-edit"> 
    <button class="ui-btn-main">.ui-btn-icon-edit</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-share-->
<button class="ui-btn ui-btn-icon-share">.ui-btn-icon-share</button>

<!-- .ui-btn-split.ui-btn-icon-share-->
<div class="ui-btn-split ui-btn-icon-share"> 
    <button class="ui-btn-main">.ui-btn-icon-share</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-remove-->
<button class="ui-btn ui-btn-icon-remove">.ui-btn-icon-remove</button>

<!-- .ui-btn-split.ui-btn-icon-remove-->
<div class="ui-btn-split ui-btn-icon-remove"> 
    <button class="ui-btn-main">.ui-btn-icon-remove</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-download-->
<button class="ui-btn ui-btn-icon-download">.ui-btn-icon-download</button>

<!-- .ui-btn-split.ui-btn-icon-download-->
<div class="ui-btn-split ui-btn-icon-download"> 
    <button class="ui-btn-main">.ui-btn-icon-download</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-cloud-->
<button class="ui-btn ui-btn-icon-cloud">.ui-btn-icon-cloud</button>

<!-- .ui-btn-split.ui-btn-icon-cloud-->
<div class="ui-btn-split ui-btn-icon-cloud"> 
    <button class="ui-btn-main">.ui-btn-icon-cloud</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-page-->
<button class="ui-btn ui-btn-icon-page">.ui-btn-icon-page</button>

<!-- .ui-btn-split.ui-btn-icon-page-->
<div class="ui-btn-split ui-btn-icon-page"> 
    <button class="ui-btn-main">.ui-btn-icon-page</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-chat-->
<button class="ui-btn ui-btn-icon-chat">.ui-btn-icon-chat</button>

<!-- .ui-btn-split.ui-btn-icon-chat-->
<div class="ui-btn-split ui-btn-icon-chat"> 
    <button class="ui-btn-main">.ui-btn-icon-chat</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-phone-call-->
<button class="ui-btn ui-btn-icon-phone-call">.ui-btn-icon-phone-call</button>

<!-- .ui-btn-split.ui-btn-icon-phone-call-->
<div class="ui-btn-split ui-btn-icon-phone-call"> 
    <button class="ui-btn-main">.ui-btn-icon-phone-call</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-lock-->
<button class="ui-btn ui-btn-icon-lock">.ui-btn-icon-lock</button>

<!-- .ui-btn-split.ui-btn-icon-lock-->
<div class="ui-btn-split ui-btn-icon-lock"> 
    <button class="ui-btn-main">.ui-btn-icon-lock</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-done-->
<button class="ui-btn ui-btn-icon-done">.ui-btn-icon-done</button>

<!-- .ui-btn-split.ui-btn-icon-done-->
<div class="ui-btn-split ui-btn-icon-done"> 
    <button class="ui-btn-main">.ui-btn-icon-done</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-disk-->
<button class="ui-btn ui-btn-icon-disk">.ui-btn-icon-disk</button>

<!-- .ui-btn-split.ui-btn-icon-disk-->
<div class="ui-btn-split ui-btn-icon-disk"> 
    <button class="ui-btn-main">.ui-btn-icon-disk</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-mail-->
<button class="ui-btn ui-btn-icon-mail">.ui-btn-icon-mail</button>

<!-- .ui-btn-split.ui-btn-icon-mail-->
<div class="ui-btn-split ui-btn-icon-mail"> 
    <button class="ui-btn-main">.ui-btn-icon-mail</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-alert-->
<button class="ui-btn ui-btn-icon-alert">.ui-btn-icon-alert</button>

<!-- .ui-btn-split.ui-btn-icon-alert-->
<div class="ui-btn-split ui-btn-icon-alert"> 
    <button class="ui-btn-main">.ui-btn-icon-alert</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-angle-up-->
<button class="ui-btn ui-btn-icon-angle-up">.ui-btn-icon-angle-up</button>

<!-- .ui-btn-split.ui-btn-icon-angle-up-->
<div class="ui-btn-split ui-btn-icon-angle-up"> 
    <button class="ui-btn-main">.ui-btn-icon-angle-up</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-angle-down-->
<button class="ui-btn ui-btn-icon-angle-down">.ui-btn-icon-angle-down</button>

<!-- .ui-btn-split.ui-btn-icon-angle-down-->
<div class="ui-btn-split ui-btn-icon-angle-down"> 
    <button class="ui-btn-main">.ui-btn-icon-angle-down</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-dots-->
<button class="ui-btn ui-btn-icon-dots">.ui-btn-icon-dots</button>

<!-- .ui-btn-split.ui-btn-icon-dots-->
<div class="ui-btn-split ui-btn-icon-dots"> 
    <button class="ui-btn-main">.ui-btn-icon-dots</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-forward-->
<button class="ui-btn ui-btn-icon-forward">.ui-btn-icon-forward</button>

<!-- .ui-btn-split.ui-btn-icon-forward-->
<div class="ui-btn-split ui-btn-icon-forward"> 
    <button class="ui-btn-main">.ui-btn-icon-forward</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-fail-->
<button class="ui-btn ui-btn-icon-fail">.ui-btn-icon-fail</button>

<!-- .ui-btn-split.ui-btn-icon-fail-->
<div class="ui-btn-split ui-btn-icon-fail"> 
    <button class="ui-btn-main">.ui-btn-icon-fail</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-success-->
<button class="ui-btn ui-btn-icon-success">.ui-btn-icon-success</button>

<!-- .ui-btn-split.ui-btn-icon-success-->
<div class="ui-btn-split ui-btn-icon-success"> 
    <button class="ui-btn-main">.ui-btn-icon-success</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-plan-->
<button class="ui-btn ui-btn-icon-plan">.ui-btn-icon-plan</button>

<!-- .ui-btn-split.ui-btn-icon-plan-->
<div class="ui-btn-split ui-btn-icon-plan"> 
    <button class="ui-btn-main">.ui-btn-icon-plan</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-eye-opened-->
<button class="ui-btn ui-btn-icon-eye-opened">.ui-btn-icon-eye-opened</button>

<!-- .ui-btn-split.ui-btn-icon-eye-opened-->
<div class="ui-btn-split ui-btn-icon-eye-opened"> 
    <button class="ui-btn-main">.ui-btn-icon-eye-opened</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-eye-closed-->
<button class="ui-btn ui-btn-icon-eye-closed">.ui-btn-icon-eye-closed</button>

<!-- .ui-btn-split.ui-btn-icon-eye-closed-->
<div class="ui-btn-split ui-btn-icon-eye-closed"> 
    <button class="ui-btn-main">.ui-btn-icon-eye-closed</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-tariff-->
<button class="ui-btn ui-btn-icon-tariff">.ui-btn-icon-tariff</button>

<!-- .ui-btn-split.ui-btn-icon-tariff-->
<div class="ui-btn-split ui-btn-icon-tariff"> 
    <button class="ui-btn-main">.ui-btn-icon-tariff</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-battery-->
<button class="ui-btn ui-btn-icon-battery">.ui-btn-icon-battery</button>

<!-- .ui-btn-split.ui-btn-icon-battery-->
<div class="ui-btn-split ui-btn-icon-battery"> 
    <button class="ui-btn-main">.ui-btn-icon-battery</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-no-battery-->
<button class="ui-btn ui-btn-icon-no-battery">.ui-btn-icon-no-battery</button>

<!-- .ui-btn-split.ui-btn-icon-no-battery-->
<div class="ui-btn-split ui-btn-icon-no-battery"> 
    <button class="ui-btn-main">.ui-btn-icon-no-battery</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-half-battery-->
<button class="ui-btn ui-btn-icon-half-battery">.ui-btn-icon-half-battery</button>

<!-- .ui-btn-split.ui-btn-icon-half-battery-->
<div class="ui-btn-split ui-btn-icon-half-battery"> 
    <button class="ui-btn-main">.ui-btn-icon-half-battery</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-low-battery-->
<button class="ui-btn ui-btn-icon-low-battery">.ui-btn-icon-low-battery</button>

<!-- .ui-btn-split.ui-btn-icon-low-battery-->
<div class="ui-btn-split ui-btn-icon-low-battery"> 
    <button class="ui-btn-main">.ui-btn-icon-low-battery</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-crit-battery-->
<button class="ui-btn ui-btn-icon-crit-battery">.ui-btn-icon-crit-battery</button>

<!-- .ui-btn-split.ui-btn-icon-crit-battery-->
<div class="ui-btn-split ui-btn-icon-crit-battery"> 
    <button class="ui-btn-main">.ui-btn-icon-crit-battery</button> 
    <button class="ui-btn-menu"></button> 
</div>

<!-- .ui-btn.ui-btn-icon-demo-->
<button class="ui-btn ui-btn-icon-demo">.ui-btn-icon-demo</button>

<!-- .ui-btn-split.ui-btn-icon-demo-->
<div class="ui-btn-split ui-btn-icon-demo"> 
    <button class="ui-btn-main">.ui-btn-icon-demo</button> 
    <button class="ui-btn-menu"></button> 
</div>

© «Bitrix24», 2001-2024
Up