Подкомпонент позволяет создать навигационный элемент. Чаще всего представлен иконкой размером 28px. Допускается использовать текст рядом с иконкой. Иконку необходимо передавать в свойство children, текст — в свойство label.

Иконка и текст могут располагаться либо горизонтально, либо вертикально. Управлять этим поведением можно с помощью свойства mode у Tabbar.

Выбранное состояние

Используйте свойство selected, чтобы показать текущий активный раздел.

Индикатор

С помощью свойства indicator можно задать для компонента счётчик или индикатор уведомления. Передавайте компоненты Counter с size="s" или Badge.

Тэг компонента

Через свойство Component можно переопределить тэг, который будет отрендерен компонентом (по умолчанию при передаче свойства href компонент использует тэг a, в иных случаях button);

Доступность (a11y)

Если вы не передаете свойство label, то ассистивные технологии не смогут однозначно озвучить ваш элемент. В таком случае рекомендуется вместе с иконкой передавать в свойство children компонент VisuallyHidden с поясняющим текстом.

import { Icon28UserCircleOutline } from '@vkontakte/icons';
import { TabbarItem, VisuallyHidden } from '@vkontakte/vkui';
 
<TabbarItem>
  {/* Данный текст будет озвучен скринридером */}
  <VisuallyHidden>Профиль</VisuallyHidden>
  <Icon28UserCircleOutline />
</TabbarItem>;

В качестве альтернативного решение можно передать текст для скринридера в свойство aria-label или создать отдельный элемент с текстом и передать его id в свойство aria-labelledby.

<TabbarItem aria-label="Профиль">
  <Icon28UserCircleOutline />
</TabbarItem>

<span id="my-label">Профиль</span>
 
<TabbarItem aria-labelledby="my-label">
  <Icon28UserCircleOutline />
</TabbarItem>