Button

Компонент Button в Chakra UI представляет собой универсальный элемент для взаимодействия пользователя с интерфейсом. Он поддерживает разнообразные стили, размеры, состояния и варианты, что позволяет создавать кнопки, полностью соответствующие дизайну приложения. В основе компонента лежит элемент HTML <button>, но Chakra UI добавляет широкий набор пропсов для управления внешним видом и поведением.

Варианты кнопок

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

  • solid — стандартная кнопка с фоном. Используется для основных действий.

    <Button colorScheme="blue" variant="solid">Сохранить</Button>

  • outline — кнопка с обводкой и прозрачным фоном. Подходит для второстепенных действий.

    <Button colorScheme="green" variant="outline">Отменить</Button>

  • ghost — кнопка без фона и минимальной визуальной нагрузки. Часто используется в тулбарах.

    <Button variant="ghost">Подробнее</Button>

  • link — кнопка, визуально похожая на ссылку. Используется для навигации внутри приложения.

    <Button variant="link" colorScheme="teal">Перейти</Button>

Размеры и цвета

Кнопки поддерживают стандартные размеры через пропс size:

  • xs — очень маленькая
  • sm — малая
  • md — средняя (по умолчанию)
  • lg — большая

Пример:

<Button size="lg" colorScheme="red">Удалить</Button>

Цветовая схема задается через colorScheme. Chakra UI предоставляет набор встроенных схем (blue, red, green, teal, purple и др.), каждая из которых автоматически управляет фоновыми цветами, обводкой и состояниями наведения и нажатия.

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

Button поддерживает состояния через пропсы:

  • isDisabled — делает кнопку неактивной.
  • isLoading — отображает индикатор загрузки внутри кнопки.
  • loadingText — текст, который отображается во время состояния загрузки.
  • isActive — визуально активирует кнопку.

Пример с индикатором загрузки:

<Button isLoading loadingText="Сохраняем..." colorScheme="blue">
  Сохранить
</Button>

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

Chakra UI позволяет легко добавлять иконки с помощью компонентов Icon или @chakra-ui/icons. Иконки располагаются слева или справа через пропсы leftIcon и rightIcon:

import { CheckIcon } from '@chakra-ui/icons';

<Button colorScheme="green" leftIcon={<CheckIcon />}>
  Готово
</Button>

<Button colorScheme="red" rightIcon={<CheckIcon />}>
  Удалить
</Button>

Кнопки с размерами и адаптивностью

Компонент Button поддерживает адаптивные стили через систему Chakra UI responsive props. Например, можно менять размеры кнопки на разных разрешениях:

<Button
  size={{ base: 'sm', md: 'md', lg: 'lg' }}
  colorScheme="purple"
>
  Адаптивная кнопка
</Button>

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

Все кнопки Chakra UI могут быть полностью кастомизированы с помощью пропсов sx, css или через тему. В теме можно определить:

  • новые варианты кнопок
  • собственные цветовые схемы
  • глобальные размеры и отступы

Пример добавления собственного варианта через тему:

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        fancy: {
          bg: 'pink.400',
          color: 'white',
          _hover: { bg: 'pink.500' },
        },
      },
    },
  },
});

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

<Button variant="fancy">Фантазийная кнопка</Button>

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

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

<ButtonGroup spacing="4">
  <Button colorScheme="blue">Сохранить</Button>
  <Button colorScheme="gray">Отменить</Button>
</ButtonGroup>

Также есть ButtonToolbar для горизонтального размещения кнопок с более сложной структурой.

Итоговые возможности компонента Button

  • Несколько предустановленных вариантов (solid, outline, ghost, link)
  • Размеры и цветовые схемы, адаптивные через пропсы
  • Состояния: активная, неактивная, загрузка
  • Поддержка иконок и текста
  • Гибкая кастомизация через тему и пропсы
  • Легкая группировка кнопок для интерфейса

Компонент Button в Chakra UI сочетает универсальность и простоту использования, позволяя создавать кнопки под любые задачи интерфейса, от минималистичных ссылок до ярких CTA.

Оглавление