StepLabel API
API reference docs for the React StepLabel component. Learn about the props, CSS, and other APIs of this exported module.
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 of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | In most cases will simply be a string containing a title for the label. |
| classes | object | - | 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. |
| error | bool | false | If |
| icon | node | - | Override the default label of the step icon. |
| optional | node | - | 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. |
| StepIconComponent | elementType | - | The component to render in place of the |
| StepIconProps | object | - | Props applied to the |
| sx | Array<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. |
ref is forwarded to the root element.You can use MuiStepLabel to change the default props of this component with the theme.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| label | .MuiStepLabel-label | span | The component that renders the label. |
| stepIcon | The component to render in place of the StepIcon. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| .Mui-active | State class applied to the label element if active={true}. | |
| .Mui-completed | State class applied to the label element if completed={true}. | |
| .Mui-disabled | State class applied to the root and label elements if disabled={true}. | |
| .Mui-error | State class applied to the root and label elements if error={true}. | |
| .MuiStepLabel-alternativeLabel | alternativeLabel | State class applied to the root and icon container and label if alternativeLabel={true}. |
| .MuiStepLabel-horizontal | horizontal | Styles applied to the root element if orientation="horizontal". |
| .MuiStepLabel-iconContainer | iconContainer | Styles applied to the icon container element. |
| .MuiStepLabel-labelContainer | labelContainer | Styles applied to the container element which wraps label and optional. |
| .MuiStepLabel-root | root | Styles applied to the root element. |
| .MuiStepLabel-vertical | vertical | Styles applied to the root element if orientation="vertical". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.