support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by NebulousGuardian645

How can I properly position a secondary action Button next to a ListItemButton in Material-UI?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm building a Material-UI list where each item is clickable (using ListItemButton) and also has a secondary action button with text. The issue is that when using a Button (wrapped in a Link in my real-world use case) in the secondaryAction slot, the button merges with the ListItemButton instead of appearing beside it. If I use an IconButton without text, everything displays correctly.

Here’s the reproduction example:

TYPESCRIPT
import { PostAdd } from '@mui/icons-material';
import {
  Button,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
} from '@mui/material';

function Page() {
  return (
    <List>
      <ListItem
        secondaryAction={
            <Button startIcon={<PostAdd />}>Right button</Button>
        }
      >
          <ListItemButton>
            <ListItemText primary={'Text'} />
          </ListItemButton>
      </ListItem>
    </List>
  );
}

The problem occurs because the Button with text ends up inside the clickable area of the ListItemButton. In my actual scenario, I need to wrap the Button in a @tanstack/router Link component like so:

TYPESCRIPT
        secondaryAction={
          <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
            <Button startIcon={<PostAdd />}>Secondary Action</Button>
          </Link>
        }

How can I adjust my implementation so that the Button with text is positioned correctly next to the ListItemButton?

Comments 0

•

Answers 5

•

5 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

You can solve this by not using the ListItem’s secondaryAction prop directly, but instead using MUI’s dedicated ListItemSecondaryAction component. This component properly positions the secondary action as an absolutely positioned element to the right of your list item. For example:

TSX
import { PostAdd } from '@mui/icons-material';
import {
  Button,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  ListItemSecondaryAction,
} from '@mui/material';
import { Link } from '@tanstack/router';

function Page() {
  return (
    <List>
      <ListItem>
        <ListItemButton>
          <ListItemText primary="Text" />
        </ListItemButton>
        <ListItemSecondaryAction>
          <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
            <Button startIcon={<PostAdd />}>
              Secondary Action
            </Button>
          </Link>
        </ListItemSecondaryAction>
      </ListItem>
    </List>
  );
}

Explanation:

The ListItemSecondaryAction component is designed for placing a secondary action (like a button) on the right side of the list item.
It uses absolute positioning so that your secondary action will not be merged into the clickable area of the ListItemButton.
This approach works even when wrapping the Button in a router Link.

Using ListItemSecondaryAction is the recommended solution in cases like this where you need a more complex or larger clickable component (like a Button with text) instead of just an IconButton.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by QuantumSurveyor874 • 1 month ago

To resolve your issue (the secondary action button merges with the list item), override Material-UI's default positioning using the sx prop on the ListItem:

The Fix:
We need to tell Material-UI: "Hey, keep the main list item on the left, and the button on the right – don't squish them together!"

JSX
<ListItem
  secondaryAction={<
    <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}><
      <Button startIcon={<PostAdd />}>Secondary Action</Button><
    </Link><
  }
  sx={{<
    '& .MuiListItemSecondaryAction-root': {<
      position: 'relative',<
      transform: 'none',<
      right: 'auto',<
      top: 'auto',<
    },<
  }}<
>
  <ListItemButton><
    <ListItemText primary="Text" /><
  </ListItemButton><
></ListItem>

This should makes the secondary action button appear properly aligned next to the list item content.

What Changed:

The sx prop adds special styling rules
We told the secondary button area to stop using weird positioning tricks
Now your button stays neatly on the right side, separated from the main list item

Extra Tip:

sx is Material-UI's way of letting you write CSS styles directly in your component
The weird class name MuiListItemSecondaryAction-root is part of Material-UI's internal styling – we’re overriding its default behavior

Note: I HAVEN'T TESTED IT MUCH, SO BE CAREFULL

No comments yet.

Answer by CosmicEngineer068 • 1 month ago

I dont think this has anything to do with it being an icon or a button and just that the width is simply more in the first case. If you inspect the styles oo the list items you will see that it is absolutely positioned from the right side:

Also, I don't think there is a standard way to do this.

Just shift it a bit more:

CSS
.MuiListItem-secondaryAction {
right: -25%;
}

Sandbox

Docs for customizing CSS classes

No comments yet.

Answer by PulsarResearcher280 • 1 month ago

You can use any component in secondaryAction that returns a valid Dom node. You need to override the default styles to make them appear as you want.

Here is one option:

CSS
.MuiListItem-secondaryAction {
    position: static;
    transform: none;

    // Adjust the min-width according to your needs
    min-width: 180px;
}

And this is how it looks:

I've put the border around the primary text to show that it is properly aligned.

No comments yet.

Answer by StellarObserver367 • 1 month ago

MaterialUI wraps the secondaryAction component with a root component with the class .MuiListItemSecondaryAction-root and this class apply positioning and translation, now based on your requirement we can override the class with:

CSS
  .MuiListItemSecondaryAction-root {
    position: relative !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    -webkit-transform: none !important;
  }

Note: Here we have to use !important to override the styles applied by material-ui.

Hopefully, this helps you!

No comments yet.

Discussion

No comments yet.

How can I properly position a secondary action Button next to a ListItemButton in Material-UI?

5 Answers

Discussion

Similar Posts

Diagnosing Intermittent Firestore Write Failures in a React Chat App

Why Use an Empty useEffect with a MobX Observable Dependency?