Skip to content
Edit this page

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

Color

size

disabled

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.

<Button variant="solid">Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="plain">Plain</Button>

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors with different variants.

Variant:

Sizes

The button components comes with three sizes out of the box: sm, md (the default), and lg.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Disabled

Use the disabled prop to disable interaction and focus.

<Button disabled variant="solid">
  Solid
</Button>
<Button disabled variant="soft">
  Soft
</Button>
<Button disabled variant="outlined">
  Outlined
</Button>
<Button disabled variant="plain">
  Plain
</Button>

With icons

Use the startIcon and/or endIcon props to add supporting icons to the button.

<Button startIcon={<Add />}>Add to cart</Button>
<Button aria-label="Like" variant="outlined" color="neutral">
  <ThumbUp />
</Button>
<Button variant="soft" endIcon={<KeyboardArrowRight />} color="success">
  Checkout
</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 Button from '@mui/joy/IconButton';

<IconButton variant="solid">
  <FavoriteBorder />
</IconButton>
<IconButton variant="soft">
  <FavoriteBorder />
</IconButton>
<IconButton variant="outlined">
  <FavoriteBorder />
</IconButton>
<IconButton variant="plain">
  <FavoriteBorder />
</IconButton>

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

Open in new tab
<Button component="a" href="#as-link" startIcon={<OpenInNew />}>
  Open in new tab
</Button>
<IconButton aria-label="Open in new tab" component="a" href="#as-link">
  <OpenInNew />
</IconButton>

Unstyled

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