Skip to content

StepLabel API

API reference docs for the React StepLabel component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import StepLabel from '@mui/material/StepLabel';
// or
import { StepLabel } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

NameTypeDefaultDescription
childrennode-

In most cases will simply be a string containing a title for the label.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

componentsProps{ label?: object }{}

The props used for each slot inside.

errorboolfalse

If true, the step is marked as failed.

iconnode-

Override the default label of the step icon.

optionalnode-

The optional node to display.

slotProps{ label?: func
| object, stepIcon?: func
| object }
{}

The props used for each slot inside.

slots{ label?: elementType, stepIcon?: elementType }{}

The components used for each slot inside.

StepIconComponentelementType-

The component to render in place of the StepIcon.

StepIconPropsobject-

Props applied to the StepIcon element.

sxArray<func
| object
| bool>
| func
| object
-

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

The ref is forwarded to the root element.

Theme default props

You can use MuiStepLabel to change the default props of this component with the theme.


Slots

Slot nameClass nameDefault componentDescription
label.MuiStepLabel-labelspanThe component that renders the label.
stepIconThe component to render in place of the StepIcon.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.Mui-activeState class applied to the label element if active={true}.
.Mui-completedState class applied to the label element if completed={true}.
.Mui-disabledState class applied to the root and label elements if disabled={true}.
.Mui-errorState class applied to the root and label elements if error={true}.
.MuiStepLabel-alternativeLabelalternativeLabelState class applied to the root and icon container and label if alternativeLabel={true}.
.MuiStepLabel-horizontalhorizontalStyles applied to the root element if orientation="horizontal".
.MuiStepLabel-iconContainericonContainerStyles applied to the icon container element.
.MuiStepLabel-labelContainerlabelContainerStyles applied to the container element which wraps label and optional.
.MuiStepLabel-rootrootStyles applied to the root element.
.MuiStepLabel-verticalverticalStyles applied to the root element if orientation="vertical".

You can override the style of the component using one of these customization options: