How to place an closing button on a tab, using Material UI

Question

I am creating dynamics tabs using ReactJS and Material UI, but I wonder how to place a functional closing tab button directly on the tab.

I mean this:

And by the way, is there any way to place the icon side by side with the text?

Try using iconLabelWrapper: { flexDirection: "row", justifyContent: "flex-start" } to make the icon and text side by side — Kundan
– Kundan, Commented Jul 21, 2020 at 1:22
This would be helpful stackoverflow.com/questions/54508683/… — Kundan
– Kundan, Commented Jul 21, 2020 at 1:25

Andrei S · Accepted Answer · 2022-11-21 16:45:59Z

6

Accepted answer worked great. To remove all warnings you can add component="span" to IconButton

<Tab key={key}  label={
    <span> 
        {tab.Name}
        <IconButton size="small" component="span" onClick={() => { alert("Closing this tab..."); }}>
            <CloseIcon />
        </IconButton>
    </span>
    }
/>

edited Nov 21, 2022 at 16:45

answered Nov 21, 2022 at 16:45

Andrei S

611 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0o0SkY0o0 Over a year ago

better solution to avoid the warning and error. Thanks

assembler · Accepted Answer · 2020-09-28 17:52:19Z

5

I tried this and it worked for me:

<Tabs
        value={value}
        onChange={handleChange}
      >
        <Tab label={
          <span>
                    {'Active'}
                    <IconButton size="small" onClick={() => { handle() }}>
                      <CloseIcon />
                    </IconButton>
                  </span>
        } />
        <Tab label="Disabled" disabled />
        <Tab label="Active" />
      </Tabs>

answered Sep 28, 2020 at 17:52

assembler

3,31813 gold badges51 silver badges102 bronze badges

2 Comments

mjh Over a year ago

=> Yields an 'invalid DOM nesting' warning, "button cannot be a descendent of button".

mjh Over a year ago

Additionally, I'm getting Warning: Failed prop type: The prop 'children' is not supported. Please remove it. with just the <span> in there.

Collectives™ on Stack Overflow

How to place an closing button on a tab, using Material UI

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related