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

Button

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

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

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

Basic Button

The Button comes with three variants: text (default), contained, and outlined.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

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

Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. В Карточках (Cards) текстовые кнопки помогают сохранить акцент на содержании карточки.

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

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

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

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>

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

Outlined buttons are medium-emphasis 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.

Цвет

<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
  Success
</Button>
<Button variant="outlined" color="error">
  Error
</Button>

In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the Adding new colors example for more info.

Размеры

For larger or smaller buttons, use the size prop.

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

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

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

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

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</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>

Размеры

For larger or smaller icon buttons, use the size prop.

<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon fontSize="inherit" />
</IconButton>

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

Ниже находятся примеры кастомизации компонента. Вы можете узнать об этом больше в документации по переопределению свойств.

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

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

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Одно из обыденных случаев использования кнопки - это навигация на другую страницу. Here is a more detailed guide.

Ограничения

Cursor not-allowed

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

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

  1. Только CSS You can remove the pointer-events style on the disabled state of the <button> element:
.MuiButtonBase-root:disabled {
    cursor: not-allowed;
    pointer-events: auto;
  }

Однако:

  • Необходимо вернуть pointer-events: none; назад, в момент когда вам нужно будет отобразить подсказку на отключенном элементе.
  • Курсор не изменится, в случае если вы отрендерите какой-либо другой элемент, например <a>.
  1. Изменение DOM Вы можете обернуть кнопку в дополнительный контейнер:
<span style={{ cursor: 'not-allowed' }}>
    <Button component={Link} disabled>
      disabled
    </Button>
  </span>

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

API