Button

Buttons allow users to take actions, and make choices, with a single tap.

Introduction

Buttons communicate actions that users can take.

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>

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

Press Enter to start editing

Colors

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

Variant:

SolidSoftOutlinedPlain

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>

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

Press Enter to start editing

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>

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

Press Enter to start editing

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>

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

Press Enter to start editing

Loading

Enable loading prop to show button's loading state. The button will be disabled when it is in the loading state.

The default loading indicator uses the CircularProgress component which can be customized using the loadingIndicator prop.

<Button loading endDecorator={<SendIcon />} variant="solid">
  Send
</Button>
<Button loading loadingIndicator="Loading…" variant="outlined">
  Fetch data
</Button>

<Button loading endDecorator={<SendIcon />} variant="solid">
  Send
</Button>
<Button loading loadingIndicator="Loading…" variant="outlined">
  Fetch data
</Button>

Press Enter to start editing

Loading position

The loadingPosition prop supports 3 values:

center (default): The loading indicator element is wrapped inside the button's loadingIndicatorCenter slot to create a proper style.
start: The loading indicator replaces the start decorator's content when the button is in loading state.
end: The loading indicator replaces the end decorator's content when the button is in loading state.

<Button loading loadingPosition="start" variant="outlined">
  Fetch data
</Button>
<Button
  loading
  loadingPosition="end"
  endDecorator={<SendIcon />}
  variant="solid"
>
  Send
</Button>

<Button loading loadingPosition="start" variant="outlined">
  Fetch data
</Button>
<Button
  loading
  loadingPosition="end"
  endDecorator={<SendIcon />}
  variant="solid"
>
  Send
</Button>

Press Enter to start editing

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>

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

Press Enter to start editing

♿️ Accessibility tip: Make sure to provide a meaningful aria-label to the icon button. It helps screen readers to properly identify the component.

<IconButton aria-label="Add to favorite">
  <FavoriteBorder />
</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>.

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>

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

Press Enter to start editing

CSS Variables

<Button
  startDecorator={<FavoriteBorder />}
>

CSS Variables

--Button-gap

<IconButton
>
  <FavoriteBorder />
</IconButton>

CSS Variables

--IconButton-size

Unstyled

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

Button

Introduction

Playground

Component

Variants

Colors

Sizes

Disabled

With decorators

Loading

Loading position

Icon button

As a link

CSS Variables

Unstyled