Перейти к контенту
Редактировать эту страницу

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

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

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

The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children.

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

Button variants

All the standard button variants are supported.

<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>

Sizes and colors

The size and color props can be used to control the appearance of the button group.

<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 button group can be displayed vertically using the orientation prop.

Split button

ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.

Disabled elevation

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

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

API