Angular Material 按钮就是原生的 <button> 或 <a> 元素，但使用 Material Design 的样式和墨水涟漪等效果进行了增强。

原生的 <button> 和 <a> 元素经常用来为用户提供最直白、易用的交互体验。 当要执行某些动作时，应该使用 <button> 元素。 当用户要导航到其它视图时，应该使用 <a> 元素。

按钮有多种变体，每种都用一个属性来定义：

属性（Attribute）	描述
mat-button	无纵深的矩形文本按钮
mat-raised-button	有纵深的矩形包含按钮
mat-flat-button	无纵深的矩形包含按钮
mat-stroked-button	矩形带边框按钮，无纵深
mat-icon-button	圆形按钮，透明背景，用于包含图标
mat-fab	圆形按钮，带纵深，默认使用主题的强调色
mat-mini-fab	与 mat-fab 相同，但尺寸更小

主题

可以通过把 color 属性设置为 primary、accent 或 warn 来把按钮的背景色设置当前主题中的颜色。

大写化

根据 Material Design 规范，按钮文本应该是大写的，不过我们选择不让它自动通过 text-transform: uppercase 进行大写化，因为这可能会在某些语言环境下导致问题。 值得注意的是，如果把文字本身写成全大写形式（而不是通过 css），可能会导致某些屏幕阅读器出现问题 —— 它将会一个字符一个字符的把文本读出来。 所以我们决定让应用开发者自己来决定用哪种形式。

一些扩展 Fab 按钮

传统的 FAB 按钮是原型的，并且只有一个单个图标的空间，你可以添加 extended 属性，让此 Fab 能扩展成圆角矩形，以便在图标之外，扩展出容纳文本标签的空间。只有完全打消的 Fab 才支持 extended 属性，微型（mini） Fab 不支持。

<button mat-fab extended>
  <mat-icon>home</mat-icon>
  Home
</button>

交互式禁用按钮

原生禁用的 <button> 元素无法获得焦点，也不会分发任何事件。在某些情况下，这可能会造成问题，因为它会阻止应用告知用户按钮禁用的原因。你可以使用 disabledInteractive 输入来将按钮样式设置为禁用，但允许它获得焦点并分发事件。该按钮将具有 aria-disabled="true" 属性，以便辅助技术识别。可以通过 MAT_BUTTON_CONFIG 注入令牌全局配置此行为。

注意：使用 disabledInteractive 输入可能会导致以前阻止操作的按钮不再阻止操作，例如表单中的提交按钮。使用此输入时，你应该在组件中防止此类情况发生。

无障碍性

Angular Material 使用原生的 <button> 和 <a> 元素，来保留默认的无障碍性体验。 当要执行某些动作时，应该使用 <button> 元素。 当用户要导航到其它视图时，应该使用 <a> 元素。

禁用锚点

除了原生 <a> 元素提供的特性外， MatAnchor 还支持禁用锚点。当你禁用锚点时，组件会设置 aria-disabled="true" 和 tabindex="-1" 。始终在你的应用程序中测试禁用的锚点，以确保与你的应用程序支持的任何辅助技术兼容。

带图标的按钮

应该通过 aria-label 或 aria-labelledby 为仅包含图标的按钮或链接（例如 mat-fab 、 mat-mini-fab 和 mat-icon-button ）赋予一个有意义的标签。有关在按钮中使用图标的更多信息，请参阅 MatIcon 的文档。

切换按钮

请参阅 MatButtonToggle 文档 以获取有关状态切换按钮的信息。