Button

Компонент Button в библиотеке Ant Design является базовым элементом пользовательского интерфейса для создания интерактивных действий. Он поддерживает различные типы, размеры, состояния и стили, что позволяет гибко интегрировать его в приложения на React.

Типы кнопок

Ant Design предоставляет несколько предустановленных типов кнопок:

primary – основной акцент на действие, визуально выделяется цветом.
default – стандартная кнопка для второстепенных действий.
dashed – кнопка с пунктирной рамкой, часто используется для дополнительных опций.
text – кнопка без рамки и фона, только текст, подходит для минималистичных интерфейсов.
link – имитация ссылки, применима для навигационных элементов.

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

import { Button } from 'antd';

function App() {
  return (
    <>
      <Button type="primary">Primary</Button>
      <Button type="default">Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="text">Text</Button>
      <Button type="link">Link</Button>
    </>
  );
}

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

Кнопки поддерживают три стандартных размера: large, middle (по умолчанию), small. Для растягивания кнопки на всю ширину контейнера используется свойство block.

<Button type="primary" size="large">Large Button</Button>
<Button type="primary" size="middle">Middle Button</Button>
<Button type="primary" size="small">Small Button</Button>
<Button type="primary" block>Block Button</Button>

Иконки и загрузка

Для добавления иконок используется свойство icon. Ant Design предоставляет библиотеку иконок @ant-design/icons. Кнопки могут показывать состояние загрузки с помощью loading.

import { Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';

<Button type="primary" icon={<DownloadOutlined />}>Download</Button>
<Button type="primary" loading>Loading</Button>
<Button type="primary" icon={<DownloadOutlined />} loading>Loading with Icon</Button>

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

Кнопки могут быть неактивными (disabled) для ограничения взаимодействия пользователя:

<Button type="primary" disabled>Disabled</Button>

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

Компонент Button.Group позволяет объединять несколько кнопок в визуально связанный блок, сохраняя общий стиль и выравнивание:

import { Button } from 'antd';

<Button.Group>
  <Button>Cancel</Button>
  <Button type="primary">Submit</Button>
</Button.Group>

Группы кнопок поддерживают горизонтальное и вертикальное расположение, а также работу с иконками.

События

Кнопки поддерживают стандартные события React, такие как onClick. Для кнопок с loading важно корректно обрабатывать состояния асинхронных операций:

function handleClick() {
  console.log('Button clicked!');
}

<Button type="primary" onCl ick={handleClick}>Click Me</Button>

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

import { useState } from 'react';
import { Button } from 'antd';

function AsyncButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return <Button type="primary" loading={loading} onCl ick={handleClick}>Submit</Button>;
}

Стилизация

Кнопки можно кастомизировать с помощью CSS и встроенных классов Ant Design:

Использование className для добавления пользовательских стилей.
Изменение цвета и границ через LESS-переменные.
Применение ghost для кнопок с прозрачным фоном на цветных контейнерах:

<Button type="primary" ghost>Ghost Button</Button>

Интеграция с формами

Кнопки часто используются в формах вместе с компонентом Form. Свойство htmlType="submit" позволяет кнопке отправлять данные формы:

import { Form, Input, Button } from 'antd';

<Form onFin ish={(values) => console.log(values)}>
  <Form.Item name="username" rules={[{ required: true }]}>
    <Input placeholder="Username" />
  </Form.Item>
  <Button type="primary" htmlType="submit">Submit</Button>
</Form>