Кнопка (Button)

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

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

модальные окна
формы
карточки
панели инструментов

Базовая кнопка

Кнопка Button имеет три варианта: текстовый (по умолчанию), содержащийся и очерченный.

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

Press Enter to start editing

Текстовая кнопка

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

Link

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

Press Enter to start editing

Основная кнопка

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

Link

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

Press Enter to start editing

Вы можете удалить возвышение с помощью параметра disableElevation.

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

Press Enter to start editing

Выделенная кнопка

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

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

Link

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

Press Enter to start editing

Обработка щелчков

Все компоненты принимают обработчик onClick, который применяется к корневому элементу DOM.

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

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

Цвет

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

Press Enter to start editing

Помимо использования цветов кнопок по умолчанию, вы можете добавить пользовательские цвета или отключить те, которые вам не нужны. Дополнительную информацию смотрите в примере Добавление новых цветов.

Размеры

Для получения кнопок большего или меньшего размера используйте параметр size.

Кнопка загрузки

Upload

<Button variant="contained" component="label">
  Upload
  <input hidden accept="image/*" multiple type="file" />
</Button>
<IconButton color="primary" aria-label="upload picture" component="label">
  <input hidden accept="image/*" type="file" />
  <PhotoCamera />
</IconButton>
<Button variant="contained" component="label">
  Upload
  <input hidden accept="image/*" multiple type="file" />
</Button>
<IconButton color="primary" aria-label="upload picture" component="label">
  <input hidden accept="image/*" type="file" />
  <PhotoCamera />
</IconButton>

Press Enter to start editing

Кнопки с пиктограммами и надписями

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

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

Press Enter to start editing

Кнопки-иконки

Кнопки-иконки часто встречаются на панелях управления приложений.

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

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

Press Enter to start editing

Размеры

Для получения большего или меньшего размера кнопок с иконкой используйте свойство size.

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

Press Enter to start editing

Цвета

Используйте свойство color, чтобы применить цветовую палитру темы к компоненту.

<IconButton aria-label="fingerprint" color="secondary">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="secondary">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
  <Fingerprint />
</IconButton>

Press Enter to start editing

Настройка

Здесь приведены некоторые примеры настройки компонента. Подробнее об этом можно узнать на странице документации про переопределения.

🎨 Если вы ищете вдохновение, вы можете посмотреть примеры кастомизации MUI Treasury.

Кнопка загрузки

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

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

Press Enter to start editing

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

Сложная кнопка

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

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

Одним из частых случаев использования является выполнение навигации только на клиенте, без HTTP-пути на сервер. Компонент ButtonBase предоставляет свойство component для обработки этого случая использования. Вот [более подробное руководство] (/material-ui/guides/routing/#button).

Ограничения

Курсор не разрешен

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

Если вы хотите использовать not-allowed, у вас есть два варианта:

Чистый CSS. Вы можете удалить стиль pointer-events на отключенном состоянии элемента <button>:

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

Однако:

Вы должны добавить pointer-events: none; обратно, когда вам нужно отображать [всплывающие подсказки на отключенных элементах] (/material-ui/react-tooltip/#disabled-elements).
Курсор не будет меняться, если вы отображаете не элемент кнопки, а что-то другое, например, элемент ссылки <a>.

Изменение DOM. Вы можете обернуть кнопку:

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

Преимуществом этого способа является поддержка любого элемента, например, элемента ссылки <a>.

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.