Стилизация кнопок

В Chakra UI кнопки реализуются через компонент <Button>, который обладает богатым набором встроенных свойств для стилизации. Главная цель библиотеки — предоставить удобный API для создания адаптивных, доступных и визуально согласованных компонентов без написания большого объема CSS.

Простейшее использование

import { Button } from "@chakra-ui/react";

<Button colorScheme="blue">Синий Button</Button>
<Button colorScheme="red" variant="outline">Красный Outline</Button>
<Button colorScheme="green" variant="ghost">Зеленый Ghost</Button>

  • colorScheme — определяет базовую цветовую палитру кнопки (primary, secondary и т.д.). Chakra автоматически подбирает оттенки для разных состояний (hover, active, focus).

  • variant — задает стиль кнопки:

    • solid — сплошная заливка (по умолчанию),
    • outline — рамка без фоновой заливки,
    • ghost — прозрачная кнопка с эффектом наведения,
    • link — стилизованная как текстовая ссылка.

Управление размерами и формой

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg" borderRadius="full">Large Rounded</Button>
  • size — управляет внутренними отступами, шрифтом и высотой кнопки (sm, md, lg, xl).
  • borderRadius — позволяет настраивать закругление углов кнопки (none, sm, md, lg, full).

Состояния кнопок

Chakra UI автоматически обрабатывает базовые состояния: hover, active, focus, disabled. Их можно тонко настраивать через пропсы или тему:

<Button
  colorScheme="purple"
  _hover={{ bg: "purple.600" }}
  _active={{ bg: "purple.700", transform: "scale(0.98)" }}
  _focus={{ boxShadow: "0 0 0 3px rgba(128, 90, 213, 0.6)" }}
>
  Настроенная кнопка
</Button>
  • _hover — свойства при наведении курсора.
  • _active — при нажатии.
  • _focus — при фокусе клавиатурой или программно.

Иконки в кнопках

Chakra UI предоставляет удобные компоненты для добавления иконок с помощью <Icon> и <Button>:

import { Button, Icon } from "@chakra-ui/react";
import { FaDownload } from "react-icons/fa";

<Button leftIcon={<Icon as={FaDownload} />} colorScheme="teal">
  Скачать
</Button>

<Button rightIcon={<Icon as={FaDownload} />} variant="outline" colorScheme="teal">
  Скачать
</Button>
  • leftIcon и rightIcon автоматически создают отступы между текстом и иконкой.
  • Использование react-icons интегрируется без дополнительной стилизации.

Использование системных пропсов для кастомизации

Chakra UI поддерживает стиль через system props, которые позволяют управлять практически любым CSS-свойством через пропсы:

<Button
  color="white"
  bg="orange.400"
  px={8}
  py={6}
  fontSize="lg"
  fontWeight="bold"
  _hover={{ bg: "orange.500" }}
>
  Кастомизированная кнопка
</Button>
  • px, py — внутренние отступы по горизонтали и вертикали.
  • fontSize, fontWeight — типографика кнопки.
  • bg, color — фоновый цвет и цвет текста.

Стилизация через тему

Для глобального переопределения стилей кнопок используется extendTheme:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "semibold",
        borderRadius: "md",
      },
      sizes: {
        xl: {
          h: "60px",
          fontSize: "lg",
          px: "32px",
        },
      },
      variants: {
        solid: (props) => ({
          bg: props.colorMode === "dark" ? "teal.300" : "teal.500",
          color: "white",
          _hover: { bg: props.colorMode === "dark" ? "teal.400" : "teal.600" },
        }),
      },
      defaultProps: {
        size: "md",
        variant: "solid",
        colorScheme: "teal",
      },
    },
  },
});
  • baseStyle — общий стиль для всех кнопок.
  • sizes — предопределенные размеры.
  • variants — новые или изменённые варианты кнопок.
  • defaultProps — глобальные значения по умолчанию.

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

Chakra UI позволяет добавлять плавные переходы к состояниям кнопки через transition:

<Button
  colorScheme="pink"
  _hover={{ transform: "scale(1.05)" }}
  transition="all 0.2s ease-in-out"
>
  Анимированная кнопка
</Button>
  • Свойство transition влияет на все изменения CSS (all) и задает скорость и кривую анимации.
  • Можно комбинировать с _hover и _active для эффекта “живой” кнопки.

Группировка кнопок

Для создания набора кнопок с одинаковыми отступами используется <ButtonGroup>:

import { ButtonGroup, Button } from "@chakra-ui/react";

<ButtonGroup spacing="4">
  <Button colorScheme="blue">Синий</Button>
  <Button colorScheme="green">Зеленый</Button>
  <Button colorScheme="red">Красный</Button>
</ButtonGroup>
  • spacing — задает промежуток между кнопками.
  • Поддерживаются все варианты size, variant и colorScheme для каждой кнопки внутри группы.

Итоговые рекомендации по стилям

  • Для простых кнопок достаточно использовать colorScheme и variant.
  • Для уникального дизайна применяются system props или глобальные настройки темы.
  • Все состояния и анимации управляются через _hover, _active, _focus и transition.
  • Использование ButtonGroup и иконок повышает удобство и визуальное единство интерфейса.

Chakra UI обеспечивает гибкость стилизации кнопок, сохраняя единый стиль приложения и сокращая необходимость написания повторяющегося CSS.

Оглавление