product | title | githubLabel | waiAria | unstyled |
---|---|---|---|---|
joy-ui |
React Button component |
component: button |
/base/react-button/ |
Buttons allow users to take actions, and make choices, with a single tap.
Buttons communicate actions that users can take.
{{"demo": "ButtonUsage.js", "hideToolbar": true}}
{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
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>;
}
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.
{{"demo": "ButtonVariants.js"}}
:::success To learn how to add more variants to the component, check out Themed components—Extend variants. :::
Every palette included in the theme is available via the color
prop.
Play around combining different colors with different variants.
{{"demo": "ButtonColors.js"}}
The button components comes with three sizes out of the box: sm
, md
(the default), and lg
.
{{"demo": "ButtonSizes.js"}}
:::success To learn how to add more sizes to the component, check out Themed components—Extend sizes. :::
Use the disabled
prop to disable interaction and focus.
{{"demo": "ButtonDisabled.js"}}
Use the startDecorator
and/or endDecorator
props to add supporting decorators to the button.
{{"demo": "ButtonIcons.js"}}
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.
{{"demo": "ButtonLoading.js"}}
The loadingPosition
prop supports 3 values:
center
(default): The loading indicator element is wrapped inside the button'sloadingIndicatorCenter
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.
{{"demo": "ButtonLoadingPosition.js"}}
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';
{{"demo": "IconButtons.js"}}
:::info
♿️ 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>
:::
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>
.
{{"demo": "ButtonLink.js"}}
{{"demo": "ButtonVariables.js", "hideToolbar": true}}
{{"demo": "IconButtonVariables.js", "hideToolbar": true}}