Button

Example
按钮类型
按钮标签
禁用状态
加载状态
幽灵按钮
图标按钮
按钮尺寸
按钮组
无障碍支持
API

按钮用于开始一个即时操作。

何时使用 #

标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

代码演示 #

按钮类型 #

按钮有三种视觉层次：主按钮、次按钮、普通按钮。不同的类型可以用来区别按钮的重要程度。

默认情况下 Button 组件使用 <button> 标签来渲染按钮，通过 component 属性可以自定义 Button 的标签类型。可选值为 button 和 a。

按钮标签 #

默认情况下 Button 组件使用 <button> 标签来渲染按钮，通过 component 属性可以自定义 Button 的标签类型。可选值为 button 和 a。

禁用状态 #

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

import ReactDOM from 'react-dom';
import { Button, Box } from '@alifd/next';
ReactDOM.render(
  <div>
    <Box wrap direction="column" spacing={20}>
      <Box direction="row" spacing={20}>
        <Button type="primary">Primary</Button>
        <Button component="a" type="primary" disabled>
          Primary
        </Button>
      </Box>
      <Box direction="row" spacing={20}>
        <Button type="secondary">Secondary</Button>
        <Button type="secondary" disabled>
          Secondary
        </Button>
      </Box>
      <Box direction="row" spacing={20}>
        <Button type="normal">Normal</Button>
        <Button type="normal" disabled>
          Normal
        </Button>
      </Box>
    </Box>
    <br />
    <div>
      <div className="ghost-light-background">
        <Button ghost="light" disabled>
          Ghost Light
        </Button>
      </div>
      <div className="ghost-dark-background">
        <Button ghost="dark" disabled>
          Ghost Dark
        </Button>
      </div>
    </div>
  </div>,
  mountNode
);

加载状态 #

通过设置 loading 属性即可以让按钮处于加载状态。

幽灵按钮 #

幽灵按钮通常用在有色背景下，可以使用 ghost 属性开启，此时 Button 为透明背景。对于浅色背景和深色背景，通过取值 light, dark 可以配置使用幽灵按钮的场景。

图标按钮 #

Button 可以嵌入 Icon，默认情况下 Icon 尺寸自动跟随 Button 的尺寸，可以通过 iconSize 属性进行设置。

通过设置 icons 属性中的 loading 即可自定义加载的 icon。

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Icon, Box } from '@alifd/next';
class LoadingIcon extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      loading: false,
    };
    this.setLoading = () => {
      this.setState({ loading: true });
    };
  }
  render() {
    return (
      <Box direction="row" spacing={20}>
        <Button
          type="secondary"
          iconSize="xs"
          loading
          icons={{ loading: <Icon type="loading" style={{ color: 'orange' }} /> }}
        >
          Custom loading icon
        </Button>
        <Button
          type="primary"
          loading={this.state.loading}
          onClick={this.setLoading}
          icons={{ loading: <Icon type="loading" style={{ color: 'orange' }} /> }}
        >
          Click to loading and show loading icon
        </Button>
      </Box>
    );
  }
}
ReactDOM.render(
  <div>
    <Box direction="row" spacing={20}>
      <Button>
        <Icon type="atm" />
        {' ATM'}
      </Button>
      <Button text>
        <Icon type="atm" />
        {' ATM'}
      </Button>
      <Button warning>
        <Icon type="atm" />
        {' ATM'}
      </Button>
      <Button iconSize="xxs">
        <Icon type="arrow-left" />
        {' ARROW'}
      </Button>
    </Box>
    <br />
    <LoadingIcon />
  </div>,
  mountNode
);

按钮尺寸 #

可以通过设置 size 属性控制按钮的尺寸，可选值为 large medium small，其中默认值为 medium。

按钮组 #

Button.Group 子组件用于将多个按钮组合在一个容器中。

无障碍支持 #

在使用不包含文本的icon Button组件时，我们需要添加aria-label对其进行描述，键盘操作请参考#无障碍键盘操作指南。

API #

Button #

参数	说明	类型	默认值
type	按钮的类型	'primary' \| 'secondary' \| 'normal'	'normal'
size	按钮的尺寸	ButtonSize	'medium'
icons	按钮中可配置的 Icon	{ loading?: React.ReactNode }	-
iconSize	按钮中 Icon 的尺寸	\| number \| 'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl' \| 'xxxl' \| 'inherit'	默认根据 size 自动映射，映射规则： size:large -> `small` size:medium -> `xs` size:small -> `xs`
htmlType	button 标签的 type 值	'submit' \| 'reset' \| 'button'	'button'
component	最终渲染的 jsx 标签标签类型	'button' \| 'a' \| React.ComponentType<unknown>	-
loading	设置按钮的载入状态	boolean	false
ghost	是否为幽灵按钮	true \| false \| 'light' \| 'dark'	false
text	是否为文本按钮	boolean	false
warning	是否为警告按钮	boolean	false
disabled	是否禁用	boolean	false
onClick	点击按钮的回调	React.MouseEventHandler	-

Button.Group #

参数	说明	类型	默认值	是否必填
size	统一设置 Button 组件的按钮大小	ButtonSize	-

ButtonSize #

按钮类型

export type ButtonSize = 'small' | 'medium' | 'large';

无障碍键盘操作指南 #

按键	说明
Enter	触发onClick事件
SPACE	触发onClick事件