# 按钮
按钮用于执行用户在交互流程中触发指令、提交更改或完成的即时操作。
## 按钮类型
汇总飞书内现有各按钮相关类型与样式。
### 基础类型
[基础按钮 Button_Basic](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_basic) | 
[文字按钮 Button_Text ](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_text) | 
[链接按钮 Button_Link ](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_text)
---|---|---
[图标按钮 Button_Icon](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_icon) | 
[悬浮按钮 Button_Float](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_float) |
### 按钮组类型
[分裂按钮 Button_Split ](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_splitbutton_menu) | 
[菜单按钮 Button_Menu ](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_splitbutton_menu) | 
按钮组 ButtonGroup
---|---|---
### 特殊类型
[Button_Toggle 切换按钮](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button-overview#341aeb36:~:text=%E7%89%B9%E6%AE%8A%E7%B1%BB%E5%9E%8B-,%E7%8A%B6%E6%80%81%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE,-%E5%B8%B8%E8%A7%81%E7%B1%BB%E5%9E%8B) | 
[Button_Round 全圆角按钮](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_round) |
---|---|---
## 组件相关模式/场景
> 非组件细分变体，偏场景应用或组件组合说明
### 交互状态
**1. 默认态** (Default / Normal)
启用的按钮默认状态 | 
**2. 悬停态** (Hover)
光标悬停在按钮，提供反馈状态 | 
**3. 按下态** (Active / Press)
按压态表示用户点击
---|---|---
**4. 选中态** (Select)
按钮被选中（通常在容器面板打开或筛选条件选中场景） | 
**5. 聚焦态** (Focus-visible)
仅用户使用键盘或语音等输入方法，传达聚焦状态。 | 
**6. 加载** (Loading)
系统/操作获取数据时向用户传达加载状态。
**7. 禁用** (Disabled)
按钮无法进行交互，禁用状态无需满足无障碍对比度。 | |
### 内容
#### 按钮常见文案
按钮标签应尽量简短明了，清晰描述按钮执行的操作。同类型产品或场景内优先使用统一的行为文案。
**新建、 创建、添加**
操作 | 说明
---|---
**新建**
 | - **目标场景**：
用户开始一个全新的项目或任务时，强调初始状态为空，然后用户在初始状态上进行补充或完善。
- **常见示例**：
“新建画布”、“新建文档”、“新建多维表格”、“新建任务”等。
- **操作结果**：
得到初始状态，需继续进行完整对象/内容操作。
**添加**
 | - **目标场景**：
将现有对象插入到列表、集合或系统等已有内容中，通常有后缀“添加 xxx”。
- **常见示例**：
“添加联系人/人员/好友”、“添加标签页”、“添加评论”、“添加图片”
- **操作结果**：
目标主体增加一部分内容。
**创建** `低频使用`
 | - **目标场景**：
- 侧重于从无到有地构建一个完整的对象/事物集合，涉及到一系列操作组合。和“新建”相比，对象更加复杂。
- “创建”也经常作为“新建”触发后操作流程中的完成动作。当用户完成必要的设置、内容输入操作后，点击“创建”按钮完成实际成果转化。
- **常见示例**：
（流程完成时的）“创建”、创建团队”、“创建群组”
- **操作结果**：
流程完成或复杂流程集合开始。
#### 按钮中的图标
>仅当图标含义易识别时才使用图标，增强按钮的识别性（大部分场景不需要图标）。
- **图标在左：** 用于强调按钮的功能，使用图标增加功能具象表意，辅助用户快速了解当前按钮功能含义
- **图标在右：**
- Button_Split、Button_Menu、ExpandableText 等固定组件用法，将箭头图标放置文字右侧
- read more 等暗示用户点击跳转，采用固定“向右箭头”图标放置于右侧
- 跳转外部链接，使用“新开窗口”`icon_window-new_outlined` 放置于右侧
为防止用户困惑，请尽可能减少按钮左右同时出现图标。
### 适配
#### 国际化场景中文案超长
多语言场景下，按钮文案过长时优先精简文案，请勿出现按钮内文字换行或省略情况。
按钮文案需遵循名词字母大写、句子仅首字母大写的规则。
 | 
---|---
**正确**
- 文案在 button 中展示完整。
- 在气泡卡片等场景使用按钮组合时，可对按钮进行换行适配（非按钮文本换行）。 | 
**避免**
避免使用省略号，不能安全展示文案，可读性差。
#### 当有限空间需放置较多按钮时
在页面空间有限但需要放置多个按钮时，可以考虑以下几种处理方式：
1. 采用下拉菜单或折叠面板方式：
- 将多个按钮整合到一个下拉菜单中，可选用“更多”、“分裂按钮”或“菜单按钮”承载（具体区分可见：[分裂按钮](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_splitbutton_menu)）
- 采用折叠面板形式收纳按钮，将按钮放置于折叠面板中，默认情况下折叠显示一部分，用户点击展开显示所有按钮。（受限场景，相对较少使用）
1. 隐藏按钮文本文案节约空间。使用通用性表意图标添加 Tooltips 代替常驻的文本标签，节约页面空间
1. 优化布局。结合产品功能将该组按钮进行合理换行
>实际场景中，1 和 2 往往组合使用。先收起按钮或先隐藏文本根据场景判断。
### 无障碍
飞书设计系统中的按钮文字颜色和背景颜色对比度已达到 4.5 : 1，满足无障碍设计要求，禁用按钮无需满足无障碍对比度要求。
按钮应该支持以下键盘交互：
- `Tab`：焦点落在（非禁用）按钮上
- `Enter 回车` 或 `Space 空格` 激活按钮操作
### 特殊类型
#### 状态切换按钮
**常见类型**
切换按钮允许用户在“选中态”、“未选中态”两种状态之间进行切换。例如表格数据过滤、窗口容器开关等场景。
基础按钮、文字按钮、图标按钮可以具有切换行为。
>按钮选中后相关内容或功能即时生效，选中态文案可展示被选中或进行中任务的状态反馈，可自行定义再次点击逻辑，可取消操作，也可仅做状态展示。
>常见的切换按钮选中态使用飞书设计系统提供的 Selected 类型即可。选中态下进行鼠标悬停等操作交互直接在当前状态上叠加。
**特殊类型**
在当前按钮类型上进行选中态变化视觉吸引力不足，也可以通过调整选中前后按钮文案，或根据下方常见规律调整增强选中前后的样式对比。
按钮交互细节（hover、pressed 等）遵循按钮生效前情况。
类型 | 选用样式 | 场景示例
---|---|---
1. **选中前功能强引导，选中后状态弱展示**
> 功能模块优先级较高，选中前需对用户进行强引导，选中后无需引导用户持续关注。 | **默认态**：按钮样式引导力强，通常为面性按钮。
**已选状态**：使用视觉引导力弱化的按钮样式，通常为线性按钮 | 
订阅/关注
2. **选中前功能一般引导，选中后状态一般展示**
> 功能入口多，选中前采用一般展示按钮样式。选中后仅作为状态展示告知用户。 | 默认态和选中态样式基本相同，仅进行文案调整 | 
会议列表功能
多维表格分享
3. **选中前功能弱引导，选中后状态相对强展示**
> 功能模块选项多且优先级比重相同，需用户对当前功能进行主观判断，可对该组按钮进行弱引导处理。选中后需反馈用户并引起关注。 | **默认态**：
按钮视觉相对弱化，通常为灰色次级按钮或灰色图标按钮。 | 
关注/收藏/置顶
富文本工具栏
会议日程状态
表格筛选
**为何强引导中有些采用主按钮，而有些却使用次级按钮？**
按钮的类型依据场景来选定，就像在某个场景中全是同类列表（每个列表均配有一个按钮），若采用主按钮，会引发视觉干扰，故而选择次级按钮，这样选中后展现的样式可能更微弱。再比如在某个卡片场景里没有同类按钮，仅有这一个按钮，因此无需担忧视觉干扰，选用主按钮极为恰当，选中后展示可适当减弱视觉效果。弱引导的情况也是如此。
#### 全圆角按钮
“Button_Basic 基础按钮” 提供设置形状为 round 的配置能力，该类按钮即为[全圆角按钮](https://open.feishu.cn/document/tools-and-resources/design-specification/component---data-entry/button/button_round)。常规操作链路中避免使用，并关注链路上下流程中的一致性。