# Button UI Классический виджет с кнопкой. Кнопка отображается в правом нижнем углу. ```ts import 'yandex-messenger-widget/lib/ui/button.css'; import { buttonUIFactory, yandexUnreadCounterFactory, } from 'yandex-messenger-widget'; const unreadCounterPlugin = yandexUnreadCounterFactory(); const ui = buttonUIFactory({ unreadCounterPlugin, }); const widget = createMultiChatsWidget({ serviceId: YOUR_SERVICE_ID, iframeOpenData: { // Параметры открытия виджета (идентификатор чата, идентификатор бота и т.п.) // [подробнее](./interfaces.md#baseiframeopenparams) }, }) .setPlugin(unreadCounterPlugin) .setUI(ui) .init(); ui.mount(); ``` **buttonUIFactory**(props: [ButtonProps](./interfaces.md#buttonprops)): [ButtonUI](./interfaces.md#buttonui) `props`         `isMobile?`: *boolean*         Мобильный вид виджета. Если не задан, вычисляется автоматически         `autocloseable?`: *boolean*         Если `true`, то при клике вне области попапа, попап будет закрываться         `strategies?`: *Array\<[BehaviorStrategies](./interfaces.md#behaviorstrategies)>*         Стратегии открытия         `badgeMaxCount?`: *number*         При превышении указанного ограничения отобразится сокращенная форма записи значения счетчика (maxCount+)         `badgeType?`: *[BadgeType](./interfaces.md#badgetype)*         Вид бейджика с количеством непрочитанных сообщений.         `collapsedDesktop?`: *[ButtonCollapsed](./interfaces.md#buttoncollapsed)*         Свернута ли кнопка виджета в десктопном отображении.         `collapsedTouch?`: *[ButtonCollapsed](./interfaces.md#buttoncollapsed)*         Свернута ли кнопка виджета в мобильном отображении.         `buttonText?`: *string*         Текст кнопки виджета         `unreadCounterPlugin?`: *[UnreadCounterPlugin](./interfaces.md#unreadcounterplugin)*         Плагин кол-ва непрочитанных сообщений         `paranjaVisible?`: *boolean*         Если `true`, полупрозрачный слой для затемнения фона будет виден Для правильной работы необходимо монтировать кнопку в `body` Слой не отключает скролл страницы, включать/отключать скролл можно в событие `onToggled`         `pageScrollController?`: *[PageScrollController](./interfaces.md#pagescrollcontroller)*         Установить кастомный контроллер скролла страницы Нужен для управления поведением скролла страницы при открытии попапа Контроллер по умолчанию отключает скролл страницы в мобильном режиме --- `hidden`: *boolean* > Скрыт ли попап `onToggled`: *[Event](./interfaces.md#event)\<[OnToggledEvent](./interfaces.md#ontoggledevent)>* > Вызывается при открытии/закрытии попапа --- # CSS переменные `--yandex-mssngr-widget-bg-color`: `#fff` >Цвет фона --- `--yandex-mssngr-widget-text-color`: `#292c33` >Цвeт текста --- `--yandex-mssngr-widget-error-button-color`: `#1c70c4` >Цвет текста кнопки **Повторить** --- `--yandex-mssngr-widget-loader-spinner-color`: `#00a8a8` >Цвет спиннера --- `--yandex-mssngr-widget-fullscreen-left`: `0` >Левый отступ в полноэкранном режиме (координата) --- `--yandex-mssngr-widget-fullscreen-right`: `0` >Правый отступ в полноэкранном режиме (координата) --- `--yandex-mssngr-widget-fullscreen-top`: `0` >Верхний отступ в полноэкранном режиме (координата) --- `--yandex-mssngr-widget-fullscreen-bottom`: `0` >Нижний отступ в полноэкранном режиме (координата) --- `--yandex-mssngr-widget-fullscreen-z-index`: `10050` >z-index полноэкранного режима --- `--yandex-mssngr-widget-popup-base-z-index`: `10000` >Базовый z-index попапа Сам попап находится на +10 Полупрозрачный слой для затемнения фона на +5 --- `--yandex-mssngr-widget-popup-mobile-header-height`: `40px` >Высота мобильной шапки --- `--yandex-mssngr-widget-popup-width`: `360px` >Ширина попапа --- `--yandex-mssngr-widget-popup-height`: `640px` >Высота попапа --- `--yandex-mssngr-widget-popup-transition-time`: `.4s` >Время отображения попапа --- `--yandex-mssngr-widget-popup-timing-func`: `ease` >Ease функция отображения попапа --- `--yandex-mssngr-widget-popup-paranja-color`: `rgba(0, 0, 0, .56)` >Цвет паранжи --- `--yandex-mssngr-widget-popup-shadow`: `0px -2px 6px rgba(14, 21, 47, 0.03), 0px 6px 18px rgba(14, 21, 47, 0.13)` >Тень попапа --- `--yandex-mssngr-widget-close-color`: `currentColor` >Цвет крестика закрытия --- `--yandex-mssngr-widget-close-bg-hover-color`: `#EFF3F6` >Цвет подложки крестика закрытия при наведении --- `--yandex-mssngr-widget-popup-ui-fixed-offset-bottom`: `20px` >Отступ от попапа снизу --- `--yandex-mssngr-widget-popup-ui-fixed-offset-right`: `20px` >Отступ от попапа справа --- `--yandex-mssngr-widget-popup-ui-border-radius`: `4px` >Радиус углов попапа --- `--yandex-mssngr-widget-badge-bg-color`: `red` >Цвет фона баджа --- `--yandex-mssngr-widget-badge-text-color`: `#fff` >Цвет текста в бадже --- `--yandex-mssngr-widget-button-large-scale`: `1.5` >Масштаб увеличенной иконки --- `--yandex-mssngr-widget-button-size`: `40px` >Размер кнопки --- `--yandex-mssngr-widget-button-max-width`: `280px` >Максимальная ширина кнопки --- `--yandex-mssngr-widget-button-border-radius`: `13px` >Радиус кнопки --- `--yandex-mssngr-widget-button-clickable-area-extra-space`: `20px` >Размер активной области вокруг кнопки --- `--yandex-mssngr-widget-button-icon-size`: `28px` >Размер иконки Мессенджера --- `--yandex-mssngr-widget-button-ui-static-offset-right`: `20px` >Правый отступ кнопки --- `--yandex-mssngr-widget-button-ui-static-offset-bottom`: `20px` >Нижний отступ кнопки --- `--yandex-mssngr-widget-button-ui-z-index`: `var(--popup-base-z-index)` >z-index кнопки --- `--yandex-mssngr-widget-button-ui-popup-border-radius`: `13px` >Радиус углов попапа ---