Material UI - Button inside stepper step

Question

I want to have a clickable element within a step from Material UI's stepper. The element should be visible all the time and not only when a step is active. Setting all steps to active is not possible due to UX reasons.

Here's what I tried:

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
    </StepButton>
    <div style={{ display: "flex", justifyContent: "center" }}>
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </div>
</Step>

But it seems like having a div inside a step is not allowed. Im getting errors in the div's row (e.g. Warning: Received true for a non-boolean attribute active.)

Then I tried to put the Icon in the StepButton tag:

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </StepButton>
</Step>

But this is not possible either, because Buttons inside Buttons are not allowed.

Is there any other way to use a clickable element (like the IconButton) in a step?

@keikai Unfortunately not. There is no such prop like "title" for "Step", according to Material UI's docs. And I tried it and it's not working — SO1992, Mar 31 '20 at 16:24
`Steps` is not even a Material UI component. For `step` I checked this doc: https://material-ui.com/api/step/ — SO1992, Mar 31 '20 at 16:28

score 3 · Accepted Answer · answered Mar 31 '20 at 16:18

3

You can place a button inside a StepLabel:

import { Step, StepLabel, StepContent, Button } from "@material-ui/core";

placed like this:

<Step key={x.id}>
    <StepLabel
        onClick={() => handleStep(x.id)}
        completed={completed}
    >
        {title}
        <Button
            onClick={(e)=>{
            console.log("Button Pressed")}
            }
        >
            {"Button"}
        </Button>
    </StepLabel>
    <StepContent>
        {"Content hidden when not active"}
    </StepContent>
</Step>

If you want to prevent the button from opening the step, you can add a e.stopPropagation()

answered Mar 31 '20 at 16:18

andytham

491
4
10

This is working for the additional button. But it also creates a second button for the step – SO1992 Mar 31 '20 at 16:26
I'm not sure what your goal is now, you want an additional button but not a second button? This should only create one button in each step. If you want to hide it, use a ternary condition to hide the button when active. – andytham Mar 31 '20 at 16:34

Material UI - Button inside stepper step

1 Answers1