Группа кнопок

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

Базовые свойства кнопок

The standard Button variants are supported.

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

Sizes and colors

The size and color props can be used to control the appearance of the 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>

Vertical group

The ButtonGroup can be displayed veritcally using the orientation prop.

Split button

ButtonGroup can also be used to create a split button. Выпадающий список может изменить действие кнопки (как в этом примере), или использоваться для немедленного вызова действия.

Disabled elevation

Вы можете убрать эффект "всплытия" с помощью пропа disableElevation.

<ButtonGroup disableElevation variant="contained">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API

• <Button />
• <ButtonGroup />