I have a list that shows items, and users can like or dislike them.

I have the following items on my cells:

  • Item name
  • Like button with an icon and a counter
  • Dislike button with an icon

Here is how it looks now:

enter image description here

I will change the icons to thumbs up (or heart) and thumbs down.

How should I align the items on my cells according to Material Design?

I found the following documentation, but there is no example for this: https://material.io/guidelines/components/lists-controls.html#

  • I am not sure I understand the question. What do you mean when you say order the items ? Commented Jul 31, 2017 at 10:27
  • I mean where to put the like, dislike buttons and the text in the cell. I inserted a screenshot how it looks now (not so beautiful). I will change the icons to thumbs up (or heart) and thumbs down. Thank you for your help! Commented Jul 31, 2017 at 10:45

3 Answers 3


Material design is a loose guide that cannot account for all possible scenarios. Many if not most sites keep this feature to the left, though Material Design does favor placing interactions generally to the right of list items. You'll have to interpret those conventions how you will.

Far and away the most common pattern for this is a vertical split button with a count in the middle. This is found on this very site, as well as most others featuring the ability to vote both up and down. The benefit of this is that it's compact and self-evident.

Even if you go with horizontal split, I would absolutely keep paired icons if one directly toggles the other. Arrows up/down, thumbs up/down, heart/broken heart, etc. I would not expect a thumbs down to cancel a heart, any more than I would expect a banana icon to cancel sardines.


You have an action similar to the switch example from the Material Design guideline website. I would say that according to that you should put the like and dislike buttons to the right.

EDIT: Now that you've uploaded a photo, I have one more suggestion. You might wanna consider having one icon only (a heart for example, twitter-like), that adds a like and changes it's color/style when clicked. If it's already liked when it's clicked, then just remove the like and switch back to the initial style. That is assuming you don't count negative dislikes.

  • 1
    Thank you for your suggestion but I have to count dislikes in the background but I don't want to display it so I need the dislike button because the user can filter to liked, disliked, or "no decision". Commented Jul 31, 2017 at 10:50

Assuming I understood your question well, You should definitely put the action buttons to the right.

As for the counter, you should put it with absolute positioning so everything is aligned correctly.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.