Button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<Button variant="outlined">Primary</Button>
<Button variant="outlined" color="secondary">
  Secondary
</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.

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

Размеры

Fancy larger or smaller buttons? Use the size property.

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

Иногда вы можете захотеть добавить текст для определенной кнопки, чтобы улучшить 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.

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

The loading buttons can show pending state and disable interactions.

<LoadingButton pending variant="outlined">
  Submit
</LoadingButton>
<LoadingButton pending pendingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  pending
  pendingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

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

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

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

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

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

Одно из обыденных случаев использования кнопки - это навигация на другую страницу. Одно из обыденных случаев использования кнопки - это навигация на другую страницу. 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

1. CSS only. Вы можете удалить все стили событий курсора в выключенном(disabled) состоянии в элементе <button>:

.MuiButtonBase-root:disabled {
    cursor: not-allowed;
    pointer-events: auto;
  }

Однако:

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

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

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

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

API

• <Button />
• <ButtonBase />
• <IconButton />