Group

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

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

Компонент Group можно вкладывать в другой компонент Group. Обратите внимание, что чаще всего вложенные компоненты должны иметь свойство mode="plain", это задаёт им прозрачный фон и скрывает рамки.

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

Заголовок группы. Передаётся либо в свойство header, либо в начале children, либо в Group.Header.

Загружается...
СвойствоРасположениеРекомендуемый размер
beforeСлева от всего контента28px
beforeTitleСлева от заголовка16px
afterTitleСправа от заголовка16px
beforeSubtitleСлева от подзаголовка12px
afterSubtitleСправа от подзаголовка12px
  • indicator — отображает счётчик/статус:

    <Header indicator={<Badge mode="prominent">12</Badge>}>Уведомления</Header>
  • after — контент справа от всего заголовка:

    <Header after={<Switch />}>Настройки</Header>
Загружается...

Подвал группы. Передаётся в конце children.

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

По умолчанию использует HTML-тег <footer>, дополнительно задаётся роль role="contentinfo" (для поддержки Safari<=13 ↗).

Предназначен для:

  • контактной информации;
  • ссылок на разделы сайта;
  • копирайта и юридических данных;
  • мета-информации о содержимом.
СценарийРешениеПочему важно
Глобальный подвал страницыТолько один на страницуСоответствие стандартам WAI-ARIA
Несколько подваловДобавить aria-label каждомуРазличение разделов скринридерами
Декоративный элемент<Footer Component="div">Избежать ложной семантики

В данном примере первый Footer “локальный”, потому что находится внутри секционного контента (компонент Group) и содержит мета-информацию, а второй Footer - глобальный, потому что относится ко всей странице.

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

Несколько подвалов без контекста скринридеры воспринимают как дубли, чтобы этого избежать, добавляйте aria-label каждому компоненту:

<Footer aria-label="Навигация">
  <Link href="#about">О нас</Link>
  <Link href="#contacts">Контакты</Link>
</Footer>
 
<Footer aria-label="Юридическая информация">
  <Text>© 2025 Компания</Text>
</Footer>

Используйте Component="div" если:

  • контент не соответствует семантике подвала;
  • элемент используется для визуального оформления;
  • уже есть глобальный подвал на странице.
// Декоративный раздел
<Footer Component="div">Информация на данной странице является конфиденциальной.</Footer>

Компенсирует внутренние отступы Group.

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

Собрать Group самостоятельно можно с помощью следующих подкомпонентов:

  • Group.Container – служит оберткой, отвечающей за скругления и отступы внутри группы. Принимает все основные свойства Group, кроме header и description.

  • Group.Header – отвечает за отрисовку заголовка. Соответствует свойству header у Group. Рекомендуется использовать подкомпонент Header в качестве содержимого.

  • Group.Description – отвечает за отрисовку подписи в нижней части группы. Соответствует свойству description у Group.

Загружается...
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
descriptionReactNode

Подпись под содержимым.

По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
headerReactNode

Элемент заголовка группы.

По умолчанию: -
mode"card" | "plain"

Режим отображения. Если установлен card, выглядит как карточка c обводкой и внешними отступами. Если plain — без отступов и обводки. По умолчанию режим отображения зависит от sizeX (mode=card при sizeX=REGULAR и mode=plain при sizeX=COMPACT) В модальных окнах по умолчанию plain.

По умолчанию: -
padding"s" | "m"

Отвечает за отступы вокруг контента в режиме card.

По умолчанию: -
separator"auto" | "show" | "hide"

show (только для mode="plain") - разделитель всегда показывается hide - разделитель всегда спрятан, auto - разделитель рисуется автоматически между соседними группами.

По умолчанию: -
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
mode"card" | "plain"

Режим отображения. Если установлен card, выглядит как карточка c обводкой и внешними отступами. Если plain — без отступов и обводки. По умолчанию режим отображения зависит от sizeX (mode=card при sizeX=REGULAR и mode=plain при sizeX=COMPACT) В модальных окнах по умолчанию plain.

По умолчанию: -
padding"s" | "m"

Отвечает за отступы вокруг контента в режиме card.

По умолчанию: m
separator"auto" | "show" | "hide"

show (только для mode="plain") - разделитель всегда показывается hide - разделитель всегда спрятан, auto - разделитель рисуется автоматически между соседними группами.

По умолчанию: auto
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
direction"inline" | "block"

Направление отображения контента.

По умолчанию: inline
getRootRefRef<HTMLElement>
По умолчанию: -
СвойствоОписание
afterReactNode

Допускаются иконки, текст, Link.

По умолчанию: -
afterSubtitleReactNode

Иконка справа от subtitle (рекомендуется использовать размер 12px).

По умолчанию: -
afterTitleReactNode

Иконка справа от title (рекомендуется использовать размер 16px).

По умолчанию: -
beforeReactNode

Иконка слева (рекомендуется использовать размер 28px).

По умолчанию: -
beforeSubtitleReactNode

Иконка слева от subtitle (рекомендуется использовать размер 12px).

По умолчанию: -
beforeTitleReactNode

Иконка слева от title (рекомендуется использовать размер 16px).

По умолчанию: -
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: h2
getRootRefRef<HTMLElement>
По умолчанию: -
indicatorReactNode

Допускаются текст, Indicator.

По умолчанию: -
multilineboolean

Возможность отображения текста в несколько строк.

По умолчанию: -
size"s" | "m" | "l" | "xl"

Размер компонента.

По умолчанию: m
subtitleReactNode

Подпись под основным текстом.

По умолчанию: -
subtitleComponentElementType<any, keyof IntrinsicElements>

Позволяет задать тип элемента в который будет обёрнут subtitle.

По умолчанию: span
СвойствоОписание
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: footer