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

В Chakra UI кнопка (Button) является базовым компонентом, который легко настраивается и расширяется с помощью свойств, системных стилей и пользовательских тем. Для создания кастомной кнопки важно понимать, как работают системные стили, варианты, состояния и композиция компонентов.

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

Эта строка импортирует компонент Button, который можно использовать как основу для кастомизации.

Стилизация через пропсы

Chakra UI предоставляет систему пропсов, которая позволяет напрямую изменять визуальные свойства:

  • colorScheme — задаёт цветовую палитру кнопки ("blue", "red", "green" и т.д.)
  • size — размеры: "sm", "md", "lg"
  • variant — стиль кнопки: "solid", "outline", "ghost", "link", "unstyled"
  • isDisabled — делает кнопку неактивной
  • isLoading — добавляет индикатор загрузки

Пример базовой кастомной кнопки:

<Button colorScheme="teal" size="lg" variant="solid">
  Отправить
</Button>

Здесь используется системная палитра teal, крупный размер и вариант "solid".

Создание пользовательских вариантов кнопок

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

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

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        neon: {
          bg: "cyan.400",
          color: "black",
          _hover: {
            bg: "cyan.300",
            boxShadow: "0 0 10px cyan",
          },
          _active: {
            bg: "cyan.500",
          },
        },
      },
    },
  },
});

export default theme;

Использование нового варианта:

<Button variant="neon">Неоновая кнопка</Button>
  • _hover и _active — состояния наведения и нажатия.
  • boxShadow добавляет визуальный эффект свечения.
  • Такой подход позволяет стандартизировать стили кнопок в проекте.

Комбинация иконок и текста

Часто кнопки содержат иконки. В Chakra UI есть компонент Icon и свойство leftIcon / rightIcon:

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

<Button colorScheme="purple" leftIcon={<MdSend />}>
  Отправить
</Button>
  • leftIcon добавляет иконку слева от текста, rightIcon — справа.
  • Chakra автоматически выравнивает иконку и текст по центру кнопки.

Кнопки с анимацией и динамическими эффектами

Для создания интерактивных кнопок можно использовать motion из Framer Motion, интегрируя его с Chakra через chakra():

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

const MotionButton = chakra(motion.button);

<MotionButton
  bg="pink.400"
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  color="white"
  px={6}
  py={4}
  borderRadius="md"
>
  Анимированная кнопка
</MotionButton>
  • whileHover увеличивает размер кнопки при наведении.
  • whileTap уменьшает размер при клике.
  • Chakra сохраняет системные стили (px, py, borderRadius) даже при интеграции с Framer Motion.

Создание полностью кастомного компонента кнопки

Для полного контроля над поведением кнопки создаются обёртки над компонентом Button:

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

const GradientButton = forwardRef((props, ref) => (
  <Button
    ref={ref}
    bgGradient="linear(to-r, teal.400, green.400)"
    color="white"
    _hover={{
      bgGradient: "linear(to-r, teal.500, green.500)",
      transform: "scale(1.05)",
    }}
    _active={{
      bgGradient: "linear(to-r, teal.600, green.600)",
    }}
    {...props}
  />
));

export default GradientButton;

Использование:

<GradientButton size="lg">Градиентная кнопка</GradientButton>
  • forwardRef позволяет использовать компонент как обычную кнопку с поддержкой ref.
  • bgGradient задаёт линейный градиент.
  • transform: scale(1.05) создаёт эффект “поп-ап” при наведении.

Кнопки с адаптивной шириной и макетом

Chakra UI поддерживает адаптивные пропсы, что удобно для кастомных кнопок в разных разрешениях экрана:

<Button
  w={{ base: "100%", md: "auto" }}
  px={{ base: 4, md: 6 }}
  py={3}
  colorScheme="orange"
>
  Адаптивная кнопка
</Button>
  • w={{ base: "100%", md: "auto" }} — кнопка занимает всю ширину на мобильных устройствах, но адаптируется на десктопе.
  • px и py также можно задавать адаптивно.

Важные советы по кастомным кнопкам

  • Использовать системные цвета и размеры для единообразия.
  • Определять повторяющиеся стили через theme extensions.
  • Поддерживать состояния: hover, active, focus, disabled.
  • Комбинировать текст и иконки через leftIcon/rightIcon.
  • При необходимости анимации использовать Framer Motion совместно с chakra().

Кастомизация кнопок в Chakra UI — гибкая система, которая позволяет создавать уникальные визуальные элементы без потери согласованности интерфейса.

Оглавление