Группа кнопок (Button Group)

Компонент ButtonGroup можно использовать для группировки связанных кнопок.

Основная группа кнопок

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

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Press Enter to start editing

Варианты кнопок

Поддерживаются все стандартные варианты кнопок.

<ButtonGroup variant="outlined" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text" aria-label="text button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="outlined" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text" aria-label="text button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Press Enter to start editing

Размеры и цвета

Реквизиты size и color могут быть использованы для управления внешним видом группы кнопок.

<ButtonGroup size="small" aria-label="small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="medium secondary button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="large button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="small" aria-label="small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="medium secondary button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="large button group">
  {buttons}
</ButtonGroup>

Press Enter to start editing

Вертикальная группа

Группа кнопок может быть отображена вертикально с помощью реквизита orientation.

Разделенная кнопка

ButtonGroup также может быть использована для создания разделенной кнопки. Выпадающий список может изменять действие кнопки (как в этом примере) или использоваться для немедленного запуска связанного действия.

Отключенное возвышение

Вы можете удалить возвышение с помощью параметра disableElevation.

<ButtonGroup
  disableElevation
  variant="contained"
  aria-label="Disabled elevation buttons"
>
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>
<ButtonGroup
  disableElevation
  variant="contained"
  aria-label="Disabled elevation buttons"
>
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

Press Enter to start editing

Группа кнопок (Button Group)

Основная группа кнопок

Варианты кнопок

Размеры и цвета

Вертикальная группа

Разделенная кнопка

Отключенное возвышение

API