Button 是网页中最常用的元件，跟他相依的元件和情境也不少，因此虽然他不是一个介面，依然还是可以把它单纯抽出来介绍，下面的 UML 只是列举了一个大概而已，可以再依需求去扩充罗！

UML

Button

Button 非常直觉，就是个按钮，主要是让使用者点击它来跟网页互动，点击後能发送 API （如 登入、送出 按钮） 、开关 Modal （如：确认、取消按钮）和其他各式各样的功能（如：Pagination 换页的按钮）。

而虽然 Button 看起来很简单，但其实也是有一些惯例可以去遵循，像是常见的 variant（种类）会区分出 contained （填满）、outlined （边框）和 text （纯文字）三种。

但这边还可以提一个很容易被遗忘的 ghost（背景如鬼魂般透明）种类，它通常是拿来与背景色做结合的次要按钮。

除了 variant 之外，也可以注意到按钮的颜色也常常是固定的，像是范例中就定义出了 primary、secondary 和 danger 跟 disabled，照理来说网页有 Design System 的话，Button 基本上就是这四个颜色了，除了一些很极端的案例，不然表单、登入登出、送出、确认、取消等等的情境都差不多这样了，再特殊的大概就是透过下方 IconButton 的方式以纯 Icon 的方式呈现。

IconButton

以纯 Icon 形式来呈现的 Button，其实就是把 Button 限制成只能呈现 Icon 的形式，并把它作为 IconButton 来引用。

ButtonGroup

用来呈现一整组的 Button，好处是减少重复的 Code，统一在 ButtonGroup 去给定这组 Button 的属性，就不用在每个 Button 都写一次，也可以有个更一致的排版，在整个网页中，一组的 Button 都这样排列，需要时也可以统一调整间距、方向等等。

像是再给个 orientation="vertical" 就可以变成垂直排列。

Pagination

用来实现分页功能的 UI 元件，Pagination 里面的一个个页数和前後都是 Button，但其实也有人把里面的元素用 的元素来做，这个到实作篇会再介绍，在这边可以先提一下我觉得在实作上最复杂的是维持长度的固定，像是范例有在第一页、第四页和第九页的情境都必须维持 Pagination 呈现出来的页数固定，不然换页长度一直变会造成很差的使用者体验。

它通常会用在 Table 下方像是这样：

Upload

Upload 其实有很多种形式，像是 UploadInput 或是 UploadImage，而这边介绍的是跟 Button 有依赖关系的 UploadButton，实作上可以把 UploadButton 包成一个单独的元件，也可以只实作 Upload 的抽象化功能，让 Upload 底下的 children 可以自行去决定要丢什麽。

<Upload>
  <Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>

// Or

<UploadButton
  variant="outlined"
>
  Click to Upload
</UploadButton>

小结

其实 Button 的应用真的可深可浅，上述提到的一些元件们也可以完全不跟 Button 依赖，也有没介绍到的可能会跟 Button 依赖到，其实主要还是看网页整体的设计怎麽样，如果 Button 能作为底层不断地去组上去可以避免撰写许多重复的 Code，但是如果只有各自需要客制化的东西太多，硬要用 Button 去组可能会把 Button 扩充到四不像的地步，所以也是老话一句：「看情况」！

那今天也终於把网页中大部分有一个比较完整依赖链的元件跟介面们都介绍完了！

当然一定会有我没涵盖到的部分，但我相信至少有讲到八成了，既然都介绍了这麽多的元件了，明天就接着把比较独立的元件们也介绍一下，做个 UI 元件大补帖，也希望能在介绍的时候尽量让大家去理解 UI 元件设计出来後会怎麽被使用、API 该怎麽开比较好，但主要还是在带过使用情境跟一些注意事项，没涵盖到的就再请各位担待啦！