Button 按钮
常用的操作按钮。
获取组件
import { Button } from 'rsuite';Button是组件中最基础的元素，可以快速创建一个带样式的按钮。
演示
默认
外观
appearance 属性设置按钮样式，选项包括: default, primary, link, subtle, ghost。
按钮尺寸
size 属性设置按钮尺寸, 选项包括: lg, md, sm, xs。
彩色按钮
color 属性设置按钮样式，选项包括: red, orange, yellow, green, cyan, blue, violet。
图标在文字之前
图标在文字之后
适应容器宽度
禁用
激活
可切换
按钮可以在激活和非激活状态之间切换。
加载中状态
可访问性
ARIA 属性
- Button 具有
button的角色。
键盘交互
- 当 Button 获得焦点时，Space 或 Enter 可以激活它。
Props
<Button>
| 属性名称 | 类型 (默认值) |
描述 | 版本 |
|---|---|---|---|
| active | boolean | 激活状态 | |
| appearance | Appearance ('default') |
设置外观 | |
| as | ElementType ('button') |
为组件自定义元素类型 | |
| block | boolean | 显示为块级元素 | |
| children | ReactNode | 组件的内容 | |
| classPrefix | string ('btn') |
组件 CSS 类的前缀 | |
| color | Color | 设置颜色 | |
| disabled | boolean | 禁用 | |
| endIcon | ReactNode | 在按钮文字之后显示一个图标 | |
| href | string | 按钮跳转链接 | |
| loading | boolean | 按钮可以显示加载指示器 | |
| onToggle | (event: React.MouseEvent, active: boolean) => void | 切换状态时的回调 |  |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
设置按钮尺寸 | |
| startIcon | ReactNode | 在按钮文字之前显示一个图标 | |
| toggleable | boolean | 可切换状态 | |
Appearance
type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';