EmbeddedButton
Импорт осуществляется из директории @salutejs/sdds-finai/beta
К примеру:
import * as Beta from '@salutejs/sdds-finai/beta';
import { EmbeddedButton } from '@salutejs/sdds-finai/beta';
Описание
Кнопка-иконка, предназначенная для встраивания в другие компоненты (поля ввода, карточки, контейнеры). В отличие от обычной кнопки, EmbeddedButton занимает всё доступное пространство родителя и содержит только иконку без текста.
Компонент поддерживает несколько вариантов оформления (view), размеры (size), состояние загрузки (isLoading), позиционирование иконки внутри кнопки (position), а также состояние disabled.
Иконка внутри EmbeddedButton не имеет фиксированного размера — задайте его через style. Подробнее см. Задание пользовательского размера иконки.
Быстрый старт
Примеры
- View
- Size
- Position
- Loading
- Disabled
Свойство view задаёт цветовой вариант кнопки. Доступные значения: default, secondary, accent, positive, warning, negative, info.
Свойство size управляет радиусом скругления кнопки. Доступные значения: l, m, s, xs. Размер самой кнопки определяется родительским контейнером.
Свойство position задаёт расположение иконки внутри кнопки. Доступные значения: center, center-left, center-right, top, top-left, top-right, bottom, bottom-left, bottom-right. По умолчанию — center.
При isLoading={true} иконка становится полупрозрачной, а поверх неё отображается спиннер. Для замены стандартного спиннера на кастомный контент используйте слот loader.
Свойство disabled отключает кнопку и снижает её прозрачность.
Встраивание в контейнер
Компонент занимает 100% ширины и высоты родителя, поэтому размер кнопки всегда задаётся снаружи: