Button 按钮

只需轻点按钮，用户就可以触发动作或做出选择。

按钮可以展示用户能进行的操作。他们通常直接放置在您的用户界面中，例如：

Dialogs 对话框
Modal windows 模态窗口
Forms 表单
Cards 卡片
Toolbars 工具栏

Basic Button

The Button comes with three variants: text (default), contained, and outlined.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

文本按钮

Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. 在卡片中，文本按钮有助于强调卡片的内容。

Link

<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

实心按钮

实心按钮表示高度的强调，你根据它们的立体效果和填充颜色来区分彼此。它们用于触发应用程序所具有的主要功能。

Link

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>

你也可以使用属性 disableElevation 属性来消除实心按钮的立体效果。

<Button variant="contained" disableElevation>
  Disable elevation
</Button>

描边按钮

Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app.

你也可以将描边按钮作为比实心按钮次要一点的替代方案，或者用来作为比文本按钮重要一点的展示。

Link

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
  Link
</Button>

Handling clicks 处理点击

所有组件都接受 onClick 处理程序，该处理程序被应用到根 DOM 元素中。

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  点击我
</Button>

请注意，文档里组件的 API 部分避免提到原生的属性（还是有很多）。

Color 颜色

<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
  Success
</Button>
<Button variant="outlined" color="error">
  Error
</Button>

In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the Adding new colors example for more info.

尺寸

For larger or smaller buttons, use the size prop.

Upload button 上传按钮

Upload

<label htmlFor="contained-button-file">
  <Input accept="image/*" id="contained-button-file" multiple type="file" />
  <Button variant="contained" component="span">
    Upload
  </Button>
</label>
<label htmlFor="icon-button-file">
  <Input accept="image/*" id="icon-button-file" type="file" />
  <IconButton color="primary" aria-label="upload picture" component="span">
    <PhotoCamera />
  </IconButton>
</label>

带有icons（图标）和 label（标签）的按钮

因为相比纯文本来说用户对图标更敏感，所以有些时候你可能希望为某些按钮设置图标，以增强应用程序的用户体验。例如，如果您有删除按钮，则可以使用垃圾箱图标对其进行标记。

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

图标按钮

图标按钮通常位于应用栏和工具栏中。

图标也适用于允许选择单个选项的切换按钮或取消选择，例如向项目添加或删除星标。

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

尺寸

For larger or smaller icon buttons, use the size prop.

<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" size="small">
  <DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" size="large">
  <DeleteIcon fontSize="inherit" />
</IconButton>

Customized Buttons（自定义按钮）

你可以参考以下一些例子来自定义组件。您可以在重写文档页面中了解更多有关此内容的信息。

👑 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

载入按钮（Loading buttons）

The loading buttons can show loading state and disable interactions.

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

切换此切换按钮，可以查看不同状态之间的转换。

组合按钮

文本按钮，包含按钮，浮动操作按钮和图标按钮构建在同一组件之上：ButtonBase。你可以利用这种低级组件来构建自定义交互功能。

Third-party routing library（第三方路由库）

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. ButtonBase 组件提供了 component 属性来处理此用例。 Here is a more detailed guide.

设计局限

Cursor 鼠标悬浮的禁用

在 disabled 不可用的按钮上，ButtonBase 组件会有这个设置：pointer-events: none; ，这样一来不可用样式的鼠标悬浮就不会出现。

若您希望使用 not-allowed，您有以下两种选择：

仅使用 CSS。 You can remove the pointer-events style on the disabled state of the <button> element:

.MuiButtonBase-root:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

然而：

如您要在 disabled 不可用元素上显示提示文本，则需添加 pointer-events: none;
若您加载除了一个 button 元素之外的元素，例如，一个链接 <a> 元素，指针是不会改变的。

改变 DOM。您可以这样封装按钮：

<span style={{ cursor: 'not-allowed' }}>
  <Button component={Link} disabled>
    disabled
  </Button>
</span>

这个方法能支持任何元素，例如，一个 <a> 元素。