无样式的按钮

按钮允许用户在单次点击时采取行动和作出选择。

基本用法

import ButtonUnstyled from '@mui/base/ButtonUnstyled';

<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>

自定义根元素

默认情况下， ButtonUnstyled 组件会渲染原生的 button HTML 元素。您可以通过设置component 或components.Root 属性来覆盖这个组件. 如果您提供了一个非交互元素，如 span，则 ButtonUnstyled 组件将自动添加必要的辅助属性。

ButtonDisabled

<CustomButton component="span">Button</CustomButton>
<CustomButton component="span" disabled>
  Disabled
</CustomButton>

Compare the attributes on the span with the button from the previous demo.

复杂的定制

In addition to HTML elements, you can also use SVGs with the ButtonUnstyled component.

<SvgButton>Button</SvgButton>

useButton hook

import { useButton } from '@mui/base/ButtonUnstyled';

useButton hook 允许您在其他组件中使用 ButtonUnstyled 的功能。 It returns props to be placed on a custom button element, along with fields representing the internal state of the button.

The useButton hook requires the ref of the element it's used on. Additionally, you need to provide the component prop (unless you intend to use the plain button).

<CustomButton onClick={() => console.log('click!')}>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>

API

<ButtonUnstyled />