Button

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

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

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

Contained buttons

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

Link

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>

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

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

Text buttons

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

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

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

Link

<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

Outlined buttons

Контурные кнопки - это кнопки со средним акцентом. They contain actions that are important, but aren't the primary action in an app.

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

Link

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" 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

<label htmlFor="contained-button-file">
  <Input accept="image/*" id="contained-button-file" multiple type="file" />
  <Button variant="contained" component="span">
    Upload
  </Button>
</label>
<label htmlFor="icon-button-file">
  <Input accept="image/*" id="icon-button-file" type="file" />
  <IconButton color="primary" aria-label="upload picture" component="span">
    <PhotoCamera />
  </IconButton>
</label>

Размеры

Fancy larger or smaller buttons? Use the size property.

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

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. Например, если у вас есть кнопка удаления, вы можете пометить ее значком мусорной корзины.

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

Icon button

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

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

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

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

The loading buttons can show loading state and disable interactions.

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

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

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

Complex buttons

Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: ButtonBase. You can take advantage of this lower-level component to build custom interactions.

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

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

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

Ограничения

Cursor not-allowed

Есть два способа использовать 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>.