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

MUI (Material-UI) предоставляет мощные средства для работы с компонентами интерфейса, включая кнопки действий, которые обычно используются в диалогах, карточках, таблицах и формах. Важно понимать, как создавать кастомные action кнопки, чтобы они соответствовали дизайну приложения и обеспечивали удобство взаимодействия с пользователем.

Создание базовой кастомной кнопки

Для начала необходимо импортировать компонент Button из MUI:

import Button from '@mui/material/Button';

Базовая кнопка создается следующим образом:

<Button variant="contained" color="primary">
  Сохранить
</Button>

variant="contained" — задает тип кнопки (contained, outlined, text).
color="primary" — определяет цветовую тему кнопки.

Кастомизация через стили

MUI позволяет кастомизировать кнопки с помощью пропа sx или styled API. Пример использования sx для изменения цвета, отступов и границы:

<Button
  variant="contained"
  sx={{
    backgroundColor: '#4caf50',
    color: '#fff',
    padding: '10px 20px',
    borderRadius: '8px',
    '&:hover': {
      backgroundColor: '#45a049'
    }
  }}
>
  Подтвердить
</Button>

&:hover — псевдокласс для состояния при наведении курсора.
padding и borderRadius — позволяют гибко настраивать размеры и форму кнопки.

Использование styled API дает более структурированный подход, особенно при создании повторно используемых компонентов:

import { styled } from '@mui/material/styles';

const CustomButton = styled(Button)({
  backgroundColor: '#ff5722',
  color: '#fff',
  padding: '12px 24px',
  borderRadius: '12px',
  fontWeight: 'bold',
  '&:hover': {
    backgroundColor: '#e64a19'
  }
});

Добавление иконок

MUI поддерживает интеграцию иконок в кнопки с помощью компонента IconButton или сочетания Button и SvgIcon. Пример кнопки с иконкой:

import DeleteIcon from '@mui/icons-material/Delete';

<Button
  variant="outlined"
  color="secondary"
  startIcon={<DeleteIcon />}
>
  Удалить
</Button>

startIcon и endIcon позволяют добавлять иконки слева или справа от текста кнопки.
IconButton подходит для кнопок без текста, которые используются в панелях инструментов и таблицах.

Кнопки с динамическим состоянием

Иногда кнопки должны изменять стиль или текст в зависимости от состояния приложения. Это можно реализовать с использованием useState:

import { useState } from 'react';

const [loading, setLoading] = useState(false);

<Button
  variant="contained"
  color="primary"
  onCl ick={() => setLoading(true)}
  disabled={loading}
>
  {loading ? 'Загрузка...' : 'Отправить'}
</Button>

disabled — блокирует кнопку при выполнении действия.
Динамическое изменение текста улучшает пользовательский опыт и информирует о состоянии операции.

Интеграция с формами и диалогами

В MUI кастомные action кнопки часто используются в Dialog:

import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';

<Dialog open={open} onCl ose={handleClose}>
  <DialogTitle>Удаление элемента</DialogTitle>
  <DialogContent>Вы уверены, что хотите удалить этот элемент?</DialogContent>
  <DialogActions>
    <Button onCl ick={handleClose} color="inherit">Отмена</Button>
    <Button onCl ick={handleDelete} color="error">Удалить</Button>
  </DialogActions>
</Dialog>

DialogActions автоматически выравнивает кнопки в нижней части диалога.
Цветовые темы (color="error") помогают выделять критичные действия.

Анимации и переходы

Для придания кнопкам интерактивности можно использовать компоненты Grow, Fade или Slide:

import Fade from '@mui/material/Fade';

<Fade in={showButton}>
  <Button variant="contained" color="success">
    Сохранить изменения
  </Button>
</Fade>

in контролирует появление кнопки.
Анимации помогают акцентировать внимание на важных действиях.

Практика повторного использования

Для крупных проектов рекомендуется создавать отдельные компоненты кастомных кнопок:

const SaveButton = ({ onClick, disabled }) => (
  <Button
    variant="contained"
    color="primary"
    onCl ick={onClick}
    disabled={disabled}
    sx={{ minWidth: 120 }}
  >
    Сохранить
  </Button>
);

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