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

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>

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

Размеры

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.

Если вам нужно вдохновение обратитве внимание на библиотеку компонентов MUI Treasury.

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

Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: 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

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

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

Однако:

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

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

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

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

API