IconButton 图标按钮
在按钮中渲染一个图标。
获取组件
import { IconButton } from 'rsuite';演示
默认
带文本
外观
圆形按钮
按钮尺寸
彩色按钮
禁用
激活
加载中状态
可访问性
ARIA 属性
- IconButton 具有
button的角色。
键盘交互
- 当 IconButton 获得焦点时，Space 或 Enter 可以激活它。
Props
<IconButton>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| active | boolean | 激活状态 |
| appearance | Appearance ('default') |
设置外观 |
| as | ElementType ('button') |
为组件自定义元素类型 |
| children | ReactNode | 组件的内容 |
| circle | boolean | 设置为圆形按钮 |
| classPrefix | string ('btn-icon') |
组件 CSS 类的前缀 |
| color | Color | 设置颜色 |
| disabled | boolean | 禁用 |
| href | string | 按钮跳转链接 |
| icon | Element<typeof Icon> | 设置图标 |
| loading | boolean | 按钮可以显示加载指示器 |
| placement | 'left' | 'right' ('left') |
icon 的位置 |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
设置按钮尺寸 |
ts:Appearance
type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
ts:Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';