按钮

按钮允许用户通过单击执行操作和做出选择。

按钮传达用户可以执行的操作。它们通常放置在用户界面的各处，例如：

模态窗口
表单
卡片
工具栏

基本按钮

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>

按 Enter 键开始编辑

文本按钮

文本按钮通常用于不那么突出的操作，包括位于以下位置的操作：对话框、卡片中。在卡片中，文本按钮有助于保持对卡片内容的强调。

链接

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

按 Enter 键开始编辑

容器按钮

容器按钮是高强调按钮，通过使用阴影和填充来区分。它们包含对您的应用程序至关重要的操作。

链接

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

按 Enter 键开始编辑

您可以使用 disableElevation 属性删除阴影。

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

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

按 Enter 键开始编辑

轮廓按钮

轮廓按钮是中等强调按钮。它们包含重要的操作，但不是应用程序中的主要操作。

轮廓按钮也是容器按钮的低强调替代方案，或文本按钮的高强调替代方案。

链接

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

按 Enter 键开始编辑

处理点击事件

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

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  Click me
</Button>

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

颜色

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

按 Enter 键开始编辑

除了使用默认按钮颜色外，您还可以添加自定义颜色，或禁用任何不需要的颜色。有关更多信息，请参阅添加新颜色示例。

尺寸

对于较大或较小的按钮，请使用 size 属性。

带有图标和标签的按钮

有时您可能希望某些按钮带有图标，以增强应用程序的 UX，因为我们识别徽标比纯文本更容易。例如，如果您有一个删除按钮，您可以用垃圾桶图标标记它。

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

按 Enter 键开始编辑

图标按钮

图标按钮通常在应用栏和工具栏中找到。

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

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

按 Enter 键开始编辑

尺寸

对于较大或较小的图标按钮，请使用 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>

按 Enter 键开始编辑

颜色

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

按 Enter 键开始编辑

加载中

从 v6.4.0 开始，使用 loading 属性将图标按钮设置为加载状态并禁用交互。

<Tooltip title="Click to see loading">
  <IconButton onClick={() => setLoading(true)} loading={loading}>
    <ShoppingCartIcon />
  </IconButton>
</Tooltip>

<Tooltip title="Click to see loading">
  <IconButton onClick={() => setLoading(true)} loading={loading}>
    <ShoppingCartIcon />
  </IconButton>
</Tooltip>

按 Enter 键开始编辑

徽标

您可以使用 Badge 组件向 IconButton 添加徽标。

<IconButton>
  <ShoppingCartIcon fontSize="small" />
  <CartBadge badgeContent={2} color="primary" overlap="circular" />
</IconButton>

<IconButton>
  <ShoppingCartIcon fontSize="small" />
  <CartBadge badgeContent={2} color="primary" overlap="circular" />
</IconButton>

按 Enter 键开始编辑

文件上传

要创建文件上传按钮，请使用 component="label" 将按钮变成标签，然后创建一个视觉上隐藏的类型为 file 的输入。

上传文件

<Button
  component="label"
  role={undefined}
  variant="contained"
  tabIndex={-1}
  startIcon={<CloudUploadIcon />}
>
  Upload files
  <VisuallyHiddenInput
    type="file"
    onChange={(event) => console.log(event.target.files)}
    multiple
  />
</Button>

<Button
  component="label"
  role={undefined}
  variant="contained"
  tabIndex={-1}
  startIcon={<CloudUploadIcon />}
>
  Upload files
  <VisuallyHiddenInput
    type="file"
    onChange={(event) => console.log(event.target.files)}
    multiple
  />
</Button>

按 Enter 键开始编辑

加载中

从 v6.4.0 开始，使用 loading 属性将按钮设置为加载状态并禁用交互。

切换加载开关以查看不同状态之间的过渡。

加载中

当 loading 属性设置为 boolean 时，加载包装器始终存在于 DOM 中，以防止 Google 翻译崩溃。

loading 值应始终为 null 或 boolean。不建议使用以下模式，因为它可能导致 Google 翻译崩溃

<Button {...(isFetching && { loading: true })}> // ❌ Don't do this

自定义

以下是一些自定义组件的示例。您可以在覆盖文档页面中了解更多信息。

🎨 如果您正在寻找灵感，可以查看 MUI Treasury 的自定义示例。

复杂按钮

文本按钮、容器按钮、浮动操作按钮和图标按钮都构建在同一个组件之上：ButtonBase。您可以利用这个较低级别的组件来构建自定义交互。

第三方路由库

一个常见的用例是在客户端执行导航，而无需 HTTP 服务器往返。ButtonBase 组件提供了 component 属性来处理此用例。这是一个更详细的指南。

局限性

禁止光标

ButtonBase 组件在禁用的按钮上设置 pointer-events: none;，这会阻止禁用光标的出现。

如果您希望使用 not-allowed，您有两个选择

仅 CSS。您可以删除 <button> 元素禁用状态下的 pointer-events 样式

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

但是

当您需要在禁用的元素上显示工具提示时，您应该添加回 pointer-events: none;。
如果您渲染的不是按钮元素，例如链接 <a> 元素，则光标不会更改。

DOM 更改。您可以包装按钮

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

这具有支持任何元素的优势，例如链接 <a> 元素。

无样式

使用 Base UI Button 完全拥有组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此无样式版本的组件是需要重度自定义和更小捆绑包大小的理想选择。

API

请参阅下面的文档，以获得此处提及的组件的所有属性和类的完整参考。