Bitrix UI Kit: Кнопки, Алерты и Иконки без верстки (ui.buttons, ui.alerts)

В современном Битрикс (особенно в админке и Б24) не принято верстать кнопки и сообщения «с нуля».

В ядре есть библиотека UI Kit, которая предоставляет готовые, красивые и стандартизированные элементы.

1. Кнопки (ui.buttons)

Чтобы использовать кнопки, нужно подключить расширение.codePHP

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

Теперь вы можете использовать специальные классы в HTML. Базовый класс — ui-btn.

Примеры кнопок:

<!-- Зеленая кнопка (Успех) -->
<button class="ui-btn ui-btn-success">Сохранить</button>

<!-- Красная кнопка (Опасность) -->
<button class="ui-btn ui-btn-danger">Удалить</button>

<!-- Синяя кнопка (Основная) -->
<button class="ui-btn ui-btn-primary">Действие</button>

<!-- Кнопка-ссылка -->
<a href="/" class="ui-btn ui-btn-link">Отмена</a>

<!-- Маленькая кнопка -->
<button class="ui-btn ui-btn-sm ui-btn-light-border">Настройки</button>

<!-- Кнопка с иконкой и ожиданием (спиннером) -->
<button class="ui-btn ui-btn-primary ui-btn-icon-add ui-btn-wait">Добавить</button>

• Размеры: ui-btn-sm, ui-btn-md, ui-btn-lg.
• Стили: ui-btn-light, ui-btn-light-border, ui-btn-active.
• Состояния: Класс ui-btn-wait автоматически добавляет спиннер загрузки и блокирует кнопку (стилистически).

2. Алерты / Сообщения (ui.alerts)

Для вывода уведомлений используется расширение ui.alerts.

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

<!-- Красное сообщение об ошибке -->
<div class="ui-alert ui-alert-danger">
    <span class="ui-alert-message">Произошла критическая ошибка!</span>
</div>

<!-- Желтое предупреждение с иконкой и кнопкой закрытия -->
<div class="ui-alert ui-alert-warning ui-alert-icon-warning">
    <span class="ui-alert-message">Внимание, срок лицензии истекает.</span>
    <span class="ui-alert-close-btn"></span>
</div>

3. Иконки (ui.icons)

Набор системных иконок.

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

<div class="ui-icon ui-icon-common-user"><i></i></div>
<div class="ui-icon ui-icon-service-bitrix24"><i></i></div>

Вывод:
Использование Bitrix UI Kit — это стандарт разработки интерфейсов для административной панели и Битрикс24.

Это экономит время на верстку и гарантирует, что ваши модули будут выглядеть «родными» для системы.

Bitrix UI Kit, ui.buttons, ui.alerts, кнопки битрикс, интерфейс битрикс, UI Extension, CJSCore, верстка битрикс.