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 | 按钮可以显示加载指示器 |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
设置按钮尺寸 |
| startIcon | ReactNode | 在按钮文字之前显示一个图标 |
Appearance
type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';