按钮 Button

按钮，被点击时触发一个即时操作。

基本使用

按钮根据 强调程度 不同，有三种变种，分别为 填充按钮、边框按钮、文本按钮，默认为文本按钮。

<Button variant="contained">填充按钮</Button>
<Button variant="outlined">边框按钮</Button>
<Button variant="text">文本按钮</Button>

色彩调性

按钮可以使用 tone 属性选择 Theme 中的色彩，例如 主色 primary、辅色 secondary、中性色 neutral。

暂时没做浅色背景的中性色按钮，如果看不见请点击右上角太阳图标切换至夜间主题

<Button variant="outlined" color="primary">主色</Button>
<Button variant="outlined" color="secondary">辅色</Button>
<Button variant="outlined" color="neutral">中性色</Button>

形状和尺寸

按钮的形状有 3 种：圆角 circle、方圆角 round、方角 square，默认为方圆角；按钮的大小也有 3 种：小 small、中 medium、大 large，默认为中。

<Button variant="contained">填充按钮</Button>
<Button variant="outlined">边框按钮</Button>
<Button variant="text">文本按钮</Button>

其他状态

除了默认状态外，按钮有 加载 loading 和 禁用 diabled 两种状态。

请注意，这两种状态不会响应 click 和 hover 事件

<Button loading>加载中</Button>
<Button disabled>禁用状态</Button>

图标

使用 前缀图标 startIcon 或 后缀图标 endIcon 为按钮添加图标。

<Button variant="contained" startIcon={<IconPlayArrowRounded />}>开始</Button>
<Button variant="contained" shape="circle" startIcon={<IconArrowCircleRight />}>下一步</Button>
<Button variant="contained" iconOnly shape="circle" color="secondary">
  <IconPlayArrowRounded />
</Button>

API

Button API

API