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

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. Which variant you should choose depends on the relative importance of the button's action—see Global variants—Hierarchy of importance for details.

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

Use the startDecorator and/or endDecorator props to add supporting decorators to the button.

<Button startDecorator={<Add />}>Add to cart</Button>
<Button aria-label="Like" variant="outlined" color="neutral">
  <ThumbUp />
</Button>
<Button variant="soft" endDecorator={<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 IconButton 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" startDecorator={<OpenInNew />}>
  Open in new tab
</Button>
<IconButton aria-label="Open in new tab" component="a" href="#as-link">
  <OpenInNew />
</IconButton>

CSS Variables

<Button
  startDecorator={<FavoriteBorder />}
>

CSS Variables

px
<IconButton
>
  <FavoriteBorder />
</IconButton>

CSS Variables

px

Unstyled

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