Button
Buttons allow users to take actions, and make choices, with a single tap.
Introduction
Buttons communicate actions that users can take.
<Button onClick={() => {}} />Playground
Component
After installation, you can start building with this component using the following basic elements:
import Button from '@mui/joy/Button';
export default function MyApp() {
return <Button>My button</Button>;
}
Variants
The button component supports the four global variants: solid (default), soft, outlined and plain. Choose one of them depending on the button's action importance.
Colors
Every palette included in the theme is available via the color prop. Play around combining different colors with different variants.
Variant:
With decorators
Use the startDecorator and/or endDecorator props to add supporting decorators to the button.
Icon button
Use the IconButton component if you want width and height to be the same while not having a label. Every prop previously covered are available for this component as well.
import IconButton from '@mui/joy/IconButton';
As a link
You can also use the button component as a link by assigning a value of a to the component prop. Since links are the most appropriate component for navigating through pages, that's useful when you want the same button design for a link.
Doing so will automatically change the rendered HTML tag from <button> to <a>.
<Button
startDecorator={<FavoriteBorder />}
>CSS Variables
<IconButton
>
<FavoriteBorder />
</IconButton>CSS Variables
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.