Button 按钮 #

概述 #

按钮是用户交互中最基础的组件之一。Ant Design 的 Button 组件提供了丰富的样式和功能，满足各种业务场景的需求。

基础用法 #

按钮类型 #

Button 提供了四种主要类型：

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary">主要按钮</Button>
  <Button>默认按钮</Button>
  <Button type="dashed">虚线按钮</Button>
  <Button type="text">文本按钮</Button>
  <Button type="link">链接按钮</Button>
</Space>

类型	说明	使用场景
primary	主要按钮	主要操作，如提交、确认
default	默认按钮	普通操作
dashed	虚线按钮	添加操作
text	文本按钮	弱化操作
link	链接按钮	链接跳转

按钮尺寸 #

提供三种尺寸：

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary" size="large">大按钮</Button>
  <Button type="primary">默认按钮</Button>
  <Button type="primary" size="small">小按钮</Button>
</Space>

尺寸	高度	使用场景
large	40px	页面主要操作
middle	32px	默认尺寸
small	24px	紧凑布局

加载状态 #

tsx

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

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

<Space>
  <Button type="primary" loading>加载中</Button>
  <Button type="primary" loading={loading} onClick={() => setLoading(true)}>
    点击加载
  </Button>
</Space>

禁用状态 #

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary" disabled>主要按钮</Button>
  <Button disabled>默认按钮</Button>
  <Button type="text" disabled>文本按钮</Button>
</Space>

图标按钮 #

tsx

import { Button, Space } from 'antd';
import { SearchOutlined, DownloadOutlined, PlusOutlined } from '@ant-design/icons';

<Space>
  <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
  <Button type="primary" shape="circle" icon={<SearchOutlined />} />
  <Button type="primary" shape="round" icon={<DownloadOutlined />}>下载</Button>
  <Button type="primary" icon={<PlusOutlined />}>新增</Button>
</Space>

按钮形状 #

tsx

import { Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

<Space>
  <Button type="primary" shape="default">默认</Button>
  <Button type="primary" shape="circle" icon={<SearchOutlined />} />
  <Button type="primary" shape="round">圆角</Button>
</Space>

形状	说明
default	默认矩形
circle	圆形按钮
round	圆角按钮

按钮组 #

使用 Space 或 Button.Group 组合按钮：

tsx

import { Button, Space } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

<Space>
  <Button type="primary" icon={<LeftOutlined />}>上一页</Button>
  <Button type="primary">下一页<RigthOutlined /></Button>
</Space>

危险按钮 #

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary" danger>主要危险</Button>
  <Button danger>默认危险</Button>
  <Button type="dashed" danger>虚线危险</Button>
  <Button type="text" danger>文本危险</Button>
</Space>

幽灵按钮 #

tsx

import { Button, Space } from 'antd';

<div style={{ background: 'rgb(190, 200, 200)', padding: 24 }}>
  <Space>
    <Button type="primary" ghost>主要</Button>
    <Button ghost>默认</Button>
    <Button type="dashed" ghost>虚线</Button>
    <Button type="link" ghost>链接</Button>
  </Space>
</div>

Block 按钮 #

占满整行宽度：

tsx

import { Button, Space } from 'antd';

<Space direction="vertical" style={{ width: '100%' }}>
  <Button type="primary" block>主要按钮</Button>
  <Button block>默认按钮</Button>
</Space>

API #

Button #

属性	说明	类型	默认值
block	宽度撑满父元素	boolean	false
danger	危险按钮	boolean	false
disabled	禁用状态	boolean	false
ghost	幽灵属性	boolean	false
href	链接地址	string	-
htmlType	原生 type	`submit` \| `reset` \| `button`	`button`
icon	图标	ReactNode	-
loading	加载状态	boolean \|	false
shape	按钮形状	`default` \| `circle` \| `round`	`default`
size	按钮大小	`large` \| `middle` \| `small`	`middle`
type	按钮类型	`primary` \| `dashed` \| `text` \| `link`	`default`
onClick	点击回调	(event) => void	-

ButtonGroup #

属性	说明	类型	默认值
size	按钮大小	`large` \| `middle` \| `small`	-

最佳实践 #

1. 按钮层级 #

一个页面应该只有一个主要按钮：

tsx

import { Button, Space } from 'antd';

<Space>
  <Button type="primary">提交</Button>
  <Button>取消</Button>
</Space>

2. 操作确认 #

危险操作需要二次确认：

tsx

import { Button, Popconfirm } from 'antd';

<Popconfirm title="确定删除吗？" onConfirm={handleDelete}>
  <Button danger>删除</Button>
</Popconfirm>

3. 加载状态 #

异步操作时显示加载状态：

tsx

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

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

const handleSubmit = async () => {
  setLoading(true);
  try {
    await submitData();
  } finally {
    setLoading(false);
  }
};

<Button type="primary" loading={loading} onClick={handleSubmit}>
  提交
</Button>

4. 禁用提示 #

禁用按钮应说明原因：

tsx

import { Button, Tooltip } from 'antd';

<Tooltip title="请先填写必填项">
  <Button disabled>提交</Button>
</Tooltip>

常见问题 #

1. 如何修改按钮颜色？ #

使用主题定制：

tsx

import { ConfigProvider, Button } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>
  <Button type="primary">自定义颜色</Button>
</ConfigProvider>

2. 如何实现按钮防抖？ #

tsx

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

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

const handleClick = async () => {
  if (loading) return;
  setLoading(true);
  await doSomething();
  setLoading(false);
};

3. 如何自定义图标位置？ #

tsx

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

<Button>
  <SearchOutlined /> 搜索
</Button>

下一步 #

接下来学习 Icon 图标组件！