If you want to head over to the code on Github, there you go.

Using version as below

• NextJS - 15.0.1
• ReactJS - 19.0.0
• Material UI - ^5.16.7

Encoutered a small problem when using Material UI Tabs component. I had a design that demanded showing an action icon in the tab header. Found it interesting to implement, it was easy though.

Show me the code

Heres the gist

You can use this component directly in your app.

const ActionSection = () => {
  return (
    <div
      style={{
        marginLeft: "auto", // remove this to move action items together with tabs
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        gap: 2,
      }}
    >
      <Image width={24} height={24} src={MyIcon} alt="Image Icon" />
      <Button>Action</Button>
    </div>
  );
};