ButtonGroup для группировки

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

Импорт и базовая структура

Для начала необходимо импортировать компонент:

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';

Базовая структура ButtonGroup выглядит следующим образом:

<ButtonGroup variant="contained" color="primary">
  <Button>Левая</Button>
  <Button>Средняя</Button>
  <Button>Правая</Button>
</ButtonGroup>
  • variant — задает стиль кнопок: text, outlined, contained.
  • color — определяет цветовую тему: primary, secondary, error, info, success, warning.
  • orientation — направление размещения кнопок: horizontal (по умолчанию) или vertical.

Свойства ButtonGroup

  • variant Определяет визуальный стиль всех кнопок в группе одновременно. Примеры:
<ButtonGroup variant="outlined">
  <Button>Да</Button>
  <Button>Нет</Button>
</ButtonGroup>
  • color Применяется к каждой кнопке в группе, упрощая единообразное оформление. Например:
<ButtonGroup color="success">
  <Button>Принять</Button>
  <Button>Отменить</Button>
</ButtonGroup>
  • size Позволяет задавать размер всех кнопок в группе: small, medium, large.
<ButtonGroup size="large">
  <Button>Сохранить</Button>
  <Button>Удалить</Button>
</ButtonGroup>
  • orientation Горизонтальная или вертикальная ориентация кнопок:
<ButtonGroup orientation="vertical">
  <Button>Вверх</Button>
  <Button>Вниз</Button>
</ButtonGroup>
  • disabled Если true, все кнопки в группе становятся неактивными:
<ButtonGroup disabled>
  <Button>Редактировать</Button>
  <Button>Удалить</Button>
</ButtonGroup>
  • fullWidth Заставляет группу занимать всю ширину родительского контейнера:
<ButtonGroup fullWidth>
  <Button>Левый</Button>
  <Button>Правый</Button>
</ButtonGroup>

Группировка с разделителями

Для визуального разделения кнопок можно использовать свойство variant="outlined", которое добавляет границы между кнопками. Также можно комбинировать с color и size:

<ButtonGroup variant="outlined" color="secondary" size="small">
  <Button>Опция 1</Button>
  <Button>Опция 2</Button>
  <Button>Опция 3</Button>
</ButtonGroup>

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

ButtonGroup отлично подходит для кнопок с иконками, позволяя создавать панели инструментов:

import SaveIcon from '@mui/icons-material/Save';
import DeleteIcon from '@mui/icons-material/Delete';

<ButtonGroup variant="contained" color="primary">
  <Button startIcon={<SaveIcon />}>Сохранить</Button>
  <Button startIcon={<DeleteIcon />}>Удалить</Button>
</ButtonGroup>
  • startIcon / endIcon — позволяет разместить иконку слева или справа от текста кнопки.

ButtonGroup с toggle-эффектом

Можно использовать состояние для создания переключаемых кнопок:

import { useState } from 'react';

const [selected, setSelected] = useState('left');

<ButtonGroup variant="contained">
  <Button
    color={selected === 'left' ? 'primary' : 'inherit'}
    onCl ick={() => setSelected('left')}
  >
    Левый
  </Button>
  <Button
    color={selected === 'center' ? 'primary' : 'inherit'}
    onCl ick={() => setSelected('center')}
  >
    Средний
  </Button>
  <Button
    color={selected === 'right' ? 'primary' : 'inherit'}
    onCl ick={() => setSelected('right')}
  >
    Правый
  </Button>
</ButtonGroup>

Таким образом можно создать визуально интерактивный набор кнопок с выделением активной позиции.

Стилизация и кастомизация

ButtonGroup можно дополнительно стилизовать через sx или styled. Например:

<ButtonGroup
  sx={{
    borderRadius: '12px',
    boxShadow: 3,
    '& .MuiButton-root': {
      textTransform: 'none',
    },
  }}
>
  <Button>Пункт 1</Button>
  <Button>Пункт 2</Button>
</ButtonGroup>
  • & .MuiButton-root позволяет настраивать все кнопки внутри группы.
  • boxShadow и borderRadius создают более современный вид.

Горизонтальные и вертикальные панели

Для вертикальных панелей полезно добавлять отступы между группами и управлять шириной кнопок:

<ButtonGroup
  orientation="vertical"
  variant="outlined"
  sx={{ marginRight: 2 }}
>
  <Button>Пункт A</Button>
  <Button>Пункт B</Button>
  <Button>Пункт C</Button>
</ButtonGroup>

Вертикальные панели часто используют для боковых меню и панелей инструментов.

Резюме ключевых моментов

  • ButtonGroup объединяет кнопки визуально и функционально.
  • variant, color, size, orientation, disabled, fullWidth — основные свойства для настройки внешнего вида и поведения.
  • Поддержка иконок и toggle-состояния позволяет создавать интерактивные панели.
  • sx и styled дают возможность точечной кастомизации стиля кнопок и группы в целом.

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

Оглавление