Button 按钮

常用的操作按钮,按钮组合,按钮布局。

  • <Button> 是组件中最基础的元素,可以快速创建一个带样式的按钮。
  • <IconButton> 图标按钮组件。
  • <ButtonGroup> 按钮组控件,可以把一组按钮放在一起,并统一控制布局。
  • <ButtonToolbar> 按钮工具栏控件。

获取组件

import { Button, IconButton, ButtonGroup, ButtonToolbar } from 'rsuite';

演示

默认

外观

appearance 属性设置按钮外观:

  • 'default'(默认值) 默认按钮。
  • 'primary' 强调按钮,有引导作用的按钮。
  • 'link' 像链接一样的按钮。
  • 'subtle' 弱化的按钮。
  • 'ghost' 幽灵按钮,背景透明,放带有背景元素上的按钮。

按钮尺寸

size 属性设置按钮尺寸, 选项包括:'lg', 'md', 'sm', 'xs'

彩色按钮

color 属性设置按钮样式,选项包括: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'

自定义组合按钮

图标按钮

<IconButton> 是专为图标按钮设计的组件,设置icon属性定义所需要的图标。 只有图标按钮可以设置为一个圆形按钮。

适应容器宽度

一般适用于流式布局,或者在某个容器的顶部、底部撑满整行。

设置一个 block 属性。

禁用状态

激活状态

加载中状态

按钮组

垂直按钮组

按钮工具栏

等宽

按钮在按钮组中横向布局,并且等宽。

Props

<Button>

属性名称 类型 (默认值) 描述
active boolean 激活状态
appearance enum: 'default', 'primary', 'link', 'subtle', 'ghost'
('default')
设置外观
block boolean 显示为块级元素
children * React.Node 组件的内容
classPrefix string ('btn') 组件 CSS 类的前缀
color enum: 'red', 'orange','yellow', 'green',
'cyan', 'blue', 'violet'
设置颜色
componentClass React.ElementType ('button') 为组件自定义元素类型
disabled boolean 禁用
href string 按钮跳转链接
loading boolean 按钮可以显示加载指示器
size enum: 'lg', 'md', 'sm', 'xs' ('md') 设置按钮尺寸

<IconButton>

IconButton 继承所有 Button 的属性

属性名称 类型(默认值) 描述
circle boolean 设置为圆形按钮
classPrefix string ('btn-icon') 组件 CSS 类的前缀
icon React.Element<typeof Icon> 设置图标
placement enum: 'left', 'right' ('left') icon 的位置

<ButtonGroup>

属性名称 类型(默认值) 描述
block boolean 适应容器宽度
classPrefix string ('btn-group') 组件 CSS 类的前缀
justified boolean 横向等宽布局
size enum: lg, md, sm, xs 设置按钮尺寸
vertical boolean 按钮垂直布局