CellButton

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

Связанные компоненты:

CellButtonGroup

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

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

Цвет

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

`"neutral"`

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

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

`"accent"`

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

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

`"negative"`

Значение задаёт кнопке цвет критических действий (чаще всего красный).

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

Выравнивание

Задается свойством centered.

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

Особенности

Наследование свойств

Поддерживает все свойства SimpleCell:

before / after
subtitle / extraSubtitle
multiline
disabled

Пример с дополнительным контентом:

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

Для иконок без текста используйте aria-label.
Сочетайте с семантическими тегами:
```
<CellButton Component="a" href="/settings">
  Настройки
</CellButton>
```

Для скринридеров:

<CellButton>
  Создать документ
  <VisuallyHidden>Нажмите Enter для активации</VisuallyHidden>
</CellButton>

Также стоит ознакомиться с рекомендациями по доступности компонента SimpleCell

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

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`after`	`ReactNode` Иконка 24\|28 или `<Switch />`. Располагается справа от `indicator`. По умолчанию: `-`
`appearance`	`"accent" \| "negative" \| "neutral"` Режим `centered` переопределяет токен для темы `"accent"`. По умолчанию: `accent`
`badgeAfterSubtitle`	`ReactNode` Иконка 12. Добавится справа от текста `subtitle`. По умолчанию: `-`
`badgeAfterTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится справа от текста `children`. По умолчанию: `-`
`badgeBeforeSubtitle`	`ReactNode` Иконка 12. Добавится слева от текста `subtitle`. По умолчанию: `-`
`badgeBeforeTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится слева от текста `children`. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`before`	`ReactNode` Иконка 28 или `<Avatar size={28\|32\|40\|48\|72} />`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`centered`	`boolean` Возможность центрирования содержимого компонента. По умолчанию: `false`
`chevron`	`"auto" \| "always"` Управляет видимостью иконки шеврона `›`. `auto` - добавляет шеврон справа только для платформы `ios`; `always` - всегда показывает шеврон. По умолчанию: `-`
`chevronSize`	`"s" \| "m"` Размер chevron. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. По умолчанию: `-`
`extraSubtitle`	`ReactNode` Дополнительная строка текста под `children` и `subtitle`. По умолчанию: `-`
`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. По умолчанию: `-`
`indicator`	`ReactNode` Контейнер для текста справа от `children`. По умолчанию: `-`
`multiline`	`boolean` Включает многострочный режим для отображения текста. По умолчанию: `-`
`overTitle`	`ReactNode` Дополнительная строка текста над `children`. По умолчанию: `-`
`subtitle`	`ReactNode` Дополнительная строка текста под `children`. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

Cell

IconButton