ButtonGroup

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

Основные свойства ButtonGroup

  • size – задаёт размер всех кнопок в группе. Допустимые значения: sm, md, lg.

    <ButtonGroup size="lg">
  <Button>Сохранить</Button>
  <Button>Отмена</Button>
</ButtonGroup>

  • variant – определяет стиль кнопок. Значения могут быть стандартными для Button (solid, outline, ghost, link).

    <ButtonGroup variant="outline">
  <Button>Да</Button>
  <Button>Нет</Button>
</ButtonGroup>

  • colorScheme – задаёт цветовую тему для всех кнопок. Например, teal, blue, red.

    <ButtonGroup colorScheme="blue">
  <Button>Принять</Button>
  <Button>Отклонить</Button>
</ButtonGroup>

  • isAttached – если true, кнопки визуально объединяются без промежутков, создавая эффект “склеенных” кнопок.

    <ButtonGroup isAttached>
  <Button>Назад</Button>
  <Button>Вперед</Button>
</ButtonGroup>

  • spacing – задаёт расстояние между кнопками, если isAttached равен false. Значение указывается в единицах Chakra UI (например, 2, 4, 6).

    <ButtonGroup spacing="4">
  <Button>Редактировать</Button>
  <Button>Удалить</Button>
</ButtonGroup>

  • orientation – определяет направление кнопок: horizontal (по умолчанию) или vertical.

    <ButtonGroup orientation="vertical" spacing="3">
  <Button>Опция 1</Button>
  <Button>Опция 2</Button>
  <Button>Опция 3</Button>
</ButtonGroup>

Использование с разными типами кнопок

ButtonGroup поддерживает любые кнопки Chakra UI: обычные Button, кнопки с иконками IconButton, а также их комбинации. Это позволяет создавать компактные панели инструментов или меню действий.

<ButtonGroup>
  <Button leftIcon={<CheckIcon />}>Сохранить</Button>
  <IconButton aria-label="Удалить" icon={<DeleteIcon />} />
  <Button rightIcon={<ArrowForwardIcon />}>Далее</Button>
</ButtonGroup>
  • IconButton хорошо подходит для экономии пространства в интерфейсе.
  • Смешивание текстовых и иконок кнопок в одной группе не нарушает визуальную согласованность.

Кнопки с вложенной логикой

Можно использовать ButtonGroup вместе с состоянием React для управления активными кнопками, выборами или переключателями. Например, создание группы переключателей:

const [active, setActive] = React.useState('left');

<ButtonGroup variant="solid">
  <Button colorScheme={active === 'left' ? 'blue' : 'gray'} onCl ick={() => setActive('left')}>Левый</Button>
  <Button colorScheme={active === 'center' ? 'blue' : 'gray'} onCl ick={() => setActive('center')}>Центр</Button>
  <Button colorScheme={active === 'right' ? 'blue' : 'gray'} onCl ick={() => setActive('right')}>Правый</Button>
</ButtonGroup>

Такой подход позволяет использовать ButtonGroup как замену радио-кнопкам или вкладкам, сохраняя консистентный дизайн.

Адаптивность и стилизация

  • ButtonGroup наследует все возможности Chakra UI по стилям, включая sx для кастомных стилей.
  • Для мобильных интерфейсов часто используют orientation="vertical" при маленьком экране и горизонтальное расположение на десктопе.
  • Использование isAttached позволяет создавать кнопки с единым бордером без визуальных пробелов, что важно для панелей инструментов.
<ButtonGroup isAttached colorScheme="green">
  <Button>Скачать</Button>
  <Button>Поделиться</Button>
</ButtonGroup>

Комбинация с другими компонентами Chakra UI

ButtonGroup часто применяется вместе с:

  • Tooltip – для добавления подсказок к кнопкам.
  • Popover – для создания всплывающих меню.
  • Stack – для управления вертикальным или горизонтальным расположением кнопок в контексте всего интерфейса.
<Stack direction="row">
  <ButtonGroup>
    <Tooltip label="Редактировать">
      <Button leftIcon={<EditIcon />}>Редактировать</Button>
    </Tooltip>
    <Tooltip label="Удалить">
      <Button leftIcon={<DeleteIcon />}>Удалить</Button>
    </Tooltip>
  </ButtonGroup>
</Stack>

Советы по использованию

  • Группировать кнопки следует только если они логически связаны между собой.
  • Использовать isAttached для действий, которые выполняются совместно или представляют альтернативные варианты.
  • Настраивать spacing и size для сохранения визуальной гармонии с остальными элементами интерфейса.
  • Комбинировать с IconButton и обычными кнопками для компактных панелей управления.

ButtonGroup в Chakra UI обеспечивает быстрый способ создать согласованные и эстетически привлекательные группы кнопок, минимизируя необходимость ручной стилизации и выравнивания.

Оглавление