Button (кнопки)

Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием.

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

Диалоги
Всплывающие окно
Формы
Карточки
Панели инструментов

Блочные кнопки

Блочные кнопки имеют высокий акцент, отличаются использованием возвышения и заполнения. Они содержат действия, которые являются основными для вашего приложения.

Link

<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>

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

<Button variant="contained" color="primary" disableElevation>
  Disable elevation
</Button>

Текстовые кнопки

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

В диалогах
В карточках - Cards

В Карточках (Cards) текстовые кнопки помогают сохранить акцент на содержании карточки.

Link

<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons" color="primary">
  Link
</Button>

Контурные кнопки

Контурные кнопки - это кнопки со средним акцентом. Они содержат действия, которые важны, но не являются основными в приложении.

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

Link

<Button variant="outlined">Default</Button>
<Button variant="outlined" color="primary">
  Primary
</Button>
<Button variant="outlined" color="secondary">
  Secondary
</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" color="primary" href="#outlined-buttons">
  Link
</Button>

Handling clicks

All components accept an onClick handler that is applied to the root DOM element.

<Button onClick={() => { alert('clicked') }}>Click me</Button>

Note that the documentation avoids mentioning native props (there are a lot) in the API section of the components.

Кнопка загрузки файла

Upload

Размеры

Fancy larger or smaller buttons? Использовать свойство size.

Кнопки с иконками и текстом

Иногда вы можете захотеть добавить текст для определенной кнопки, чтобы улучшить UX, поскольку мы распознаем логотипы легче, чем обычный текст. Например, если у вас есть кнопка удаления, вы можете пометить ее значком мусорной корзины.

Кнопки с иконками

Кнопки с иконками обычно находятся на панелях навигации и на панелях инструментов.

Значки также подходят для кнопок переключения, которые позволяют выбрать элемент или отменить выбор, например, добавление или удаление звезды для элемента.

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Настраиваемые кнопки

Ниже находятся примеры кастомизации компонента. You can learn more about this in the overrides documentation page.

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Сложные кнопки

Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: ButtonBase. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских взаимодействий.

Сторонняя библиотека маршрутизации

Одно из обыденных случаев использования кнопки - это навигация на другую страницу. ButtonBase компонент предоставляет свойство для обработки этого варианта использования: component. However for certain focus polyfills ButtonBase requires the DOM node of the provided component. Этого можно достичь, указав ref для данного компонента, ожидая что компонент пересылает этот ref в базовый узел DOM. Учитывая то, что многие наши компоненты используют ButtonBase, вы сможете пользоваться ими повсюду в вашем приложении.

Здесь можно ознакомится с примером использования с react-router.

Ограничения

Cursor not-allowed

Компонент ButtonBase устанавливает pointer-events: none; на отключенных (disabled) кнопках, что отменяет появление disabled-курсора.

Есть два способа использовать not-allowed

CSS only. Вы можете удалить все стили событий курсора в выключенном(disabled) состоянии в элементе <button>:
```
.MuiButtonBase-root:disabled {
 cursor: not-allowed;
 pointer-events: auto;
}
```

Однако:

Необходимо вернуть pointer-events: none; назад, в момент когда вам нужно будет отобразить подсказку на отключенном элементе.
Курсор не изменится, в случае если вы отрендерите какой-либо другой элемент, например <a>.

DOM change. Вы можете обернуть кнопку в дополнительный контейнер:

<span style={{ cursor: 'not-allowed' }}>
 <Button component={Link} disabled>
   disabled
 </Button>
</span>

Этот способ работает для всех элементов, в том числе и для <a>.