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

В Chakra UI кнопки (Button) поддерживают несколько стандартных размеров, которые задаются через проп size. Основные значения: sm, md, lg, а также xs и xl для более тонкой настройки. Размер кнопки влияет на высоту, внутренние отступы (padding) и иногда на размер шрифта.

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

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

Особенности:

  • size применяется ко всем типам кнопок независимо от variant.
  • Высота кнопки и размер текста адаптируются автоматически.
  • Можно комбинировать с isFullWidth, чтобы кнопка растягивалась на всю ширину контейнера, при этом размер будет сохраняться.

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

Проп variant задает визуальный стиль кнопки. Основные варианты:

  1. solid — стандартная кнопка с заполнением цветом.
  2. outline — кнопка с прозрачным фоном и границей.
  3. ghost — прозрачная кнопка без границы, меняет цвет при наведении.
  4. link — выглядит как текстовая ссылка, без фона и границы.
  5. unstyled — полностью убирает стили, оставляя возможность полного кастомного оформления.

Пример применения:

<Button variant="solid" colorScheme="blue">Solid</Button>
<Button variant="outline" colorScheme="green">Outline</Button>
<Button variant="ghost" colorScheme="red">Ghost</Button>
<Button variant="link" colorScheme="purple">Link</Button>
<Button variant="unstyled">Unstyled</Button>

Ключевые моменты:

  • colorScheme определяет цвет кнопки в зависимости от варианта. Например, для solid это цвет заливки, для outline — цвет границы.
  • Комбинация size + variant позволяет создавать кнопки, подходящие под любые макеты и UX требования.
  • Для интерактивности можно использовать проп isLoading, который добавляет спиннер вместо текста.

Цветовые схемы и их использование

Проп colorScheme задает цвет кнопки в соответствии с темами Chakra UI. Можно использовать стандартные цвета, такие как blue, red, green, yellow, или кастомные цвета из темы.

Пример:

<Button colorScheme="blue" size="lg">Blue Large</Button>
<Button colorScheme="red" variant="outline" size="sm">Red Small</Button>
<Button colorScheme="teal" variant="ghost">Teal Ghost</Button>

Особенности:

  • Цветовая схема влияет на фоновый цвет, текст, границы и hover состояния.
  • Chakra UI автоматически подбирает контрастный текст для читаемости на разных фонах.
  • Можно комбинировать с disabled для серого, неактивного состояния:
<Button colorScheme="gray" isDisabled>Disabled</Button>

Иконки и размеры кнопок

Часто кнопки содержат иконки. Chakra UI поддерживает интеграцию с react-icons через пропы leftIcon и rightIcon. Иконки адаптируются под размер кнопки, если правильно указаны размеры:

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

<Button size="md" leftIcon={<FaDownload />}>Download</Button>
<Button size="sm" rightIcon={<FaDownload />}>Download</Button>

Ключевые моменты:

  • Иконки подстраиваются под size кнопки, сохраняя визуальный баланс.
  • Можно использовать кастомный размер иконки через <Icon w={5} h={5} />.
  • Комбинация иконки + текста помогает создавать кнопки для быстрых действий и повышает UX.

Полная ширина и адаптивность

Проп isFullWidth делает кнопку адаптивной по ширине контейнера:

<Button size="lg" colorScheme="blue" isFullWidth>
  Full Width Button
</Button>

Особенности:

  • Высота и размер текста сохраняются, меняется только ширина.
  • Удобно для мобильных интерфейсов, где кнопки должны растягиваться на всю ширину экрана.
  • В сочетании с variant и colorScheme позволяет создавать разнообразные интерфейсные решения без дополнительного CSS.

Пользовательские размеры и переопределение темы

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

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

const theme = extendTheme({
  components: {
    Button: {
      sizes: {
        xxl: {
          h: "64px",
          fontSize: "2xl",
          px: "32px",
        },
      },
    },
  },
});

export default theme;

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

<Button size="xxl" colorScheme="pink">Extra Extra Large</Button>

Ключевые моменты:

  • Можно задавать новые размеры, которые полностью интегрируются с существующими пропами.
  • Позволяет стандартизировать интерфейс под фирменный стиль.
  • Поддерживаются все варианты кнопок и цветовые схемы даже с кастомными размерами.

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

В Chakra UI каждая кнопка поддерживает состояния: hover, active, focus, disabled, loading. Для всех этих состояний автоматически применяются стили из темы.

Примеры:

<Button colorScheme="blue" isLoading>
  Loading
</Button>

<Button colorScheme="green" isDisabled>
  Disabled
</Button>

Особенности:

  • isLoading заменяет текст на спиннер и блокирует клики.
  • isDisabled делает кнопку неактивной и изменяет стили.
  • Hover и focus состояния управляются через colorScheme и variant.

Резюме по комбинациям размеров и вариантов

  1. Малые кнопки (xs, sm) подходят для тулбаров и компактных интерфейсов.
  2. Средние и большие (md, lg, xl) — стандарт для форм, CTA и основных действий.
  3. solid для выделенных действий, outline для второстепенных, ghost для контекстных, link для ссылок.
  4. Цветовая схема + variant + size + иконка — универсальная комбинация для всех типов интерфейсов.
  5. Кастомные размеры и полная ширина позволяют адаптировать кнопки под любые макеты и темы.

Такое системное сочетание пропов делает Chakra UI мощным инструментом для построения гибких и визуально согласованных интерфейсов.

Оглавление