ToolButton

Кнопки, которые используются для вызова инструмента, вставки вложений или для форматирования. Их можно использовать как кнопки для разового действия или для включения/выключения режима.

Компонент наследует свойства компонента Tappable, что обеспечивает базовую функциональность для интерактивных элементов, таких как обработка событий нажатия (onClick), отключение (disabled) и поддержка ссылок (href)

Загружается...

Обязательные свойства

Адаптивные иконки

Обязательные свойства IconCompact и IconRegular позволяют использовать разные иконки в зависимости от режима отображения (см. Адаптивность | Размеры элементов интерфейса). Это помогает поддерживать доступность и удобство использования на различных устройствах.

Контент

Внутри кнопки допускается разместить дочерний элемент (children) — текст, который будет отображаться. За расположение контента отвечает свойство direction:

row — иконка и текст идут горизонтально, рядом (по умолчанию);
column — иконка над текстом, вертикально.

Загружается...

Режимы отображения

Устанавливаются через свойство mode:

primary — акцентная основная кнопка, этот тип переупорядочения является первичным действием;
secondary — второстепенная кнопка с полупрозрачным фоном, этот тип переупорядочения является вторичным действием;
tertiary — кнопка без фона с низким акцентом, этот тип переупорядочения является вторичным действием;
outline — второстепенная кнопка с обводкой с средним акцентом, этот тип переупорядочения является вторичным действием рядом с Primary и первичным c Link.

Визуальное оформление

Цвет

Задаётся свойством appearance.

`"accent"`

Значение задаёт кнопке акцентный цвет, который может меняться в зависимости от светлой или тёмной схемы.

Загружается...

`"neutral"`

Значение задаёт кнопке нейтральный цвет, который также может являться альтернативным акцентным цветом кнопки.

Загружается...

Скругление

Управляется свойством rounded:

Если true — кнопка становится круглой (50% скругление);
Не работает, если direction="column" и есть дочерние элементы (children).

Загружается...

Компонент ToolButton автоматически выбирает правильный HTML-тег: по умолчанию это button, а если передано свойство href, то a. Это обеспечивает базовую поддержку доступности.

Компонент поддерживает все стандартные aria-атрибуты, что позволяет переопределить поведение по умолчанию, если это необходимо.

Кнопки с иконками

Если ToolButton содержит только иконку (без текста), обязательно добавьте aria-label с описанием действия кнопки. Это поможет пользователям с ограниченными возможностями понять назначение кнопки.

<ToolButton
  IconRegular={Icon24Add}
  IconCompact={Icon20Add}
  mode="primary"
  appearance="accent"
  aria-label="Добавить вложение"
/>

Свойства и методы

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`appearance`	`"accent" \| "neutral"` Внешний вид компонента. По умолчанию: `accent`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`direction`	`"row" \| "column"` Направление контента. По умолчанию: `row`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`IconCompact`	`ComponentType<{ className?: string; }>` Компонент иконки для компактного размера. По умолчанию: `-`
`IconRegular`	`ComponentType<{ className?: string; }>` Компонент иконки для обычного размера. По умолчанию: `-`
`mode`	`"primary" \| "secondary" \| "tertiary" \| "outline"` Режим отображения компонента. По умолчанию: `primary`
`rounded`	`boolean` Задаёт `50%` закругления для контейнера. Note: игнорируется при `direction="column"` если передан `children`. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

SimpleCell

Epic