按钮、链接和控件Buttons, links, and controls


按钮类型Button types

按钮的样式方式有助于传达它们触发的操作类型。The way buttons are styled helps communicate what kind of action they trigger. 我们维护各种格式的按钮,以显示不同的强调级别。We maintain a wide range of buttons that are formatted to show different levels of emphasis.

按钮可以有文本、图标或文本和图标的组合。Buttons can have text, an icon, or a combination of text and an icon. 为了在层次结构中传达不同的级别,我们为每个类别中的主要和辅助按钮设计。To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.

熟知设计系统Fluent Design System

熟知的 UI 为 web 和桌面组件状态、样式和可访问性提供指导。Fluent UI provides guidance for web and desktop component states, styling, and accessibility. 可以对团队平台上的按钮设置格式以显示不同级别的强调。Buttons on the Teams platform can be formatted to show different levels of emphasis. 有关 HTML 和 CSS 十六进制颜色值,请参阅熟知 UI 按钮的颜色See Fluent UI button colors for HTML and CSS hexadecimal color values.

文本按钮Text buttons

在对话框中,应将按钮右对齐,从最右边的主要操作开始。In dialogs, you should align buttons to the right, starting with the primary action farthest to the right. 在卡片中,按钮是左对齐的。In cards, buttons are left-aligned.

团队中的按钮样式Button styles in Teams

桌面客户端

Desktop Client

移动客户端

Mobile Client

对话框按钮

Dialog buttons

卡片按钮状态

Card button states

卡片按钮

Card buttons

图标按钮Icon buttons

图标按钮可以调用操作,也可以在打开和关闭时进行切换。Icon buttons can invoke an action and can also be toggled on and off.

在某些情况下,您可以对图标和文本进行配对以提高强调效果。In some cases, you can pair an icon and text to increase emphasis.

杂项按钮Miscellaneous buttons

桌面客户端Desktop Clients

放射状按钮、复选框和切换开关。Radial buttons, checkboxes, and toggle switches.

移动客户端Mobile Clients

放射状按钮、复选框和切换开关。Radial buttons, checkboxes, and toggle switches.


下面是我们对内嵌文本链接的已批准样式。Here are our approved styles for inline text links.


StyleStyle

大小和填充Size and padding

文本按钮、图标和控件包含在32高容器中,以确保所有控件在视觉上对齐和一致。Text buttons, icons, and controls are contained within a 32px high container to ensure all controls are visually aligned and consistent.

圆角Rounded corners

文本按钮的拐角半径为3px。Text buttons have a corner radius of 3px.

按钮文本Button text

在文本中使用句首字母以帮助本地化和可读性。Use sentence case in text for buttons to help with localization and legibility. (换言之,仅将短语或句子中的第一个单词的首字母大写。(In other words, only capitalize the first letter of the first word in a phrase or sentence.)