Button 按钮

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

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

Modal windows（模态窗口）
Forms（表单）
Cards（卡片）
Toolbars（工具栏)

Basic Button

Button（按钮）组件有三种形式：文本（默认值）、实心，以及描边。

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

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

Press Enter to start editing

文本按钮

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>

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

Press Enter to start editing

实心按钮

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

Link

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

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

Press Enter to start editing

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

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

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

Press Enter to start editing

描边按钮

Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. 它们用于触发应用程序中重要、但并非主要的那些操作。 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>

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

Press Enter to start editing

Handling clicks 处理点击

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

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

Note that the documentation avoids mentioning native props (there are a lot) in the API section of the components.

Color 颜色

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

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

Press Enter to start editing

除了使用默认按钮颜色外，您可以添加自定义颜色，或者禁用任何您不需要的颜色。 See the Adding new colors example for more info.

尺寸

如果需要更大或者更小的按钮，请使用size属性。

Upload button 上传按钮

Upload

<Button variant="contained" component="label">
  Upload
  <input hidden accept="image/*" multiple type="file" />
</Button>
<IconButton color="primary" aria-label="upload picture" component="label">
  <input hidden accept="image/*" type="file" />
  <PhotoCamera />
</IconButton>

<Button variant="contained" component="label">
  Upload
  <input hidden accept="image/*" multiple type="file" />
</Button>
<IconButton color="primary" aria-label="upload picture" component="label">
  <input hidden accept="image/*" type="file" />
  <PhotoCamera />
</IconButton>

Press Enter to start editing

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

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

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

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

Press Enter to start editing

图标按钮

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

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

<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>

<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>

Press Enter to start editing

尺寸

如果需要更大或者更小的图标按钮，请使用size属性。

<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>

<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>

Press Enter to start editing

Cursor 鼠标悬浮的禁用

使用 color属性来把调色板应用到组件上。

<IconButton aria-label="fingerprint" color="secondary">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
  <Fingerprint />
</IconButton>

<IconButton aria-label="fingerprint" color="secondary">
  <Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
  <Fingerprint />
</IconButton>

Press Enter to start editing

Customized Buttons（自定义按钮）

你可以参考以下一些例子来自定义组件。 You can learn more about this in the overrides documentation page.

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

载入按钮（Loading buttons）

加载按钮可以显示加载状态并禁用交互。

<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>

<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>

Press Enter to start editing

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

组合按钮

文本按钮，包含按钮，浮动操作按钮和图标按钮构建在同一组件之上：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 属性来处理此用例。 ButtonBase 组件提供了 component 属性来处理此用例。 Here is a more detailed guide.

设计局限

Cursor 鼠标悬浮的禁用

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

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

仅使用 CSS。当 <button> 元素在处于禁用的状态时，你可以移除其鼠标样式。

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

然而：

You should add pointer-events: none; back when you need to display tooltips on disabled elements.
若您加载除了一个 button 元素之外的元素，例如，一个链接 <a> 元素，指针是不会改变的。

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

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

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

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.