Unstyled button
Buttons allow users to take actions and make choices with a single tap.
Basic usage
import ButtonUnstyled from '@mui/base/ButtonUnstyled';
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>Customizing the root element
By default, the ButtonUnstyled component renders a native button HTML element. You can override this by setting the component or components.Root prop. If you provide a non-interactive element, such as a span, the ButtonUnstyled component will automatically add the necessary accessibility attributes.
<CustomButton component="span">Button</CustomButton>
<CustomButton component="span" disabled>
Disabled
</CustomButton>Compare the attributes on the span with the button from the previous demo.
Complex customization
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';
The useButton hook lets you use the functionality of ButtonUnstyled in other components. 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>