Размеры и цвета кнопок

Настройка размеров кнопок

В библиотеке MUI компоненты Button поддерживают несколько предустановленных размеров через свойство size. Доступные значения:

  • small – уменьшенная кнопка, подходящая для компактных интерфейсов или форм с большим количеством элементов.
  • medium – стандартный размер по умолчанию, оптимальный для большинства приложений.
  • large – увеличенная кнопка, которая привлекает внимание и подходит для ключевых действий.

Пример использования:

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

function Example() {
  return (
    <div>
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>
    </div>
  );
}

Размер кнопки влияет на высоту, внутренние отступы и шрифт текста. При этом MUI автоматически подбирает соотношение padding и line-height, чтобы кнопка выглядела гармонично при любом размере.

Влияние variant на размеры

Компонент Button имеет три основных варианта отображения через свойство variant:

  • text – кнопка без фона, только текст. Влияет на визуальное восприятие размера, так как отсутствие рамки делает кнопку «легче».
  • contained – кнопка с фоном и тенями. Размер определяется padding, но фон добавляет визуальную массивность.
  • outlined – кнопка с рамкой. Размер рамки и отступы создают эффект более «объемной» кнопки.

Размер и вариант можно комбинировать:

<Button variant="contained" size="large">Large Contained</Button>
<Button variant="outlined" size="small">Small Outlined</Button>

Цвета кнопок

MUI использует систему цветов на основе темы, что позволяет легко применять primary, secondary, error, warning, info, success. Свойство color определяет цвет кнопки в зависимости от выбранного варианта:

  • Для contained цвет применяется как фон, текст автоматически подбирается контрастный.
  • Для outlined и text цвет применяется к тексту и рамке (если есть).

Примеры:

<Button variant="contained" color="primary">Primary</Button>
<Button variant="outlined" color="secondary">Secondary</Button>
<Button variant="text" color="error">Error</Button>

Пользовательская цветовая настройка

MUI позволяет задавать собственные цвета через тему:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    customGreen: {
      main: '#4caf50',
      contrastText: '#ffffff',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="customGreen">Custom Green</Button>
    </ThemeProvider>
  );
}

Создание собственной палитры позволяет поддерживать единый стиль интерфейса и легко масштабировать дизайн.

Комбинирование размеров и цветов

Для сложных интерфейсов часто требуется сочетание размеров и цветов для визуальной иерархии действий. Основное правило:

  • Ключевые действия – крупные large кнопки с ярким contained цветом (primary или кастомный цвет).
  • Второстепенные действия – medium или small кнопки с outlined или text.
  • Предупреждающие действия – error или warning, чтобы привлечь внимание.

Пример комплексного использования:

<div>
  <Button variant="contained" color="primary" size="large">Save</Button>
  <Button variant="outlined" color="secondary" size="medium">Cancel</Button>
  <Button variant="text" color="error" size="small">Delete</Button>
</div>

Адаптация размеров для разных экранов

С помощью MUI и системы sx можно создавать адаптивные кнопки, которые меняют размер в зависимости от ширины экрана:

<Button
  variant="contained"
  color="primary"
  sx={{
    fontSize: { xs: '0.75rem', sm: '0.875rem', md: '1rem' },
    padding: { xs: '4px 8px', sm: '6px 12px', md: '8px 16px' },
  }}
>
  Responsive Button
</Button>

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

Заключение по практическому применению

Кнопки MUI обеспечивают единый и гибкий подход к размерам и цветам. Сочетание свойства size, варианта variant и палитры color позволяет создавать визуально сбалансированные интерфейсы, поддерживая единую тему и при этом подчеркивая важность конкретных действий.

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

Оглавление