What are the problems with using toggle buttons instead of of tabs? I have a design where action buttons and tabs share the same row.

I have 1 row with action buttons in it. In this same row I will use tabs to display different page views. I have the option to show these tabs as traditional folder tabs or toggle buttons. Which of these 2 options is the most user friendly?

  • 4
    Can you elaborate on your question, possible include some diagrams? As it is worded now, this is very vague so it's hard to write a meaningful answer. Commented Aug 26, 2013 at 22:59
  • in one of my projects, Users preferred tabs over toggle buttons. they were not able to recognize actual behavior of toggle button. but here targeted users were old (40+yrs age)
    – Awesh
    Commented Aug 27, 2013 at 10:29
  • 1
    Let me try to clarify. I have 1 row with action buttons in it. In this same row I will use tabs to display different page views. I have the option to show these tabs as traditional folder tabs or toggle buttons. Which of these 2 options is the most user friendly?
    – stephenz
    Commented Aug 27, 2013 at 14:47

5 Answers 5


For me toggle buttons are a metaphor that was created for touch screen devices that don't transfer very well to desktop applications. They present a touch, hold and slide interaction and horizontal movement while keeping the mouse button pressed is a difficult movement to achieve.

Without using numerous toggle buttons they may also, depending on your design, struggle to portray which mode the button is on. For instance, if it were a volume on/off toggle will your design clearly show the current state without the user needing the opposite state to understand?

I think a third option you could consider is a button with an icon that represents a page view. Then when clicked a simple menu drops below with the 2 options. A 'tick' icon next to one option would indicate the current state. See my screenshot as an example.enter image description here

  • Toggle buttons, as in switches? Clicking/tapping them works just fine.
    – SilverWolf
    Commented Oct 9, 2018 at 21:33

The way I see it:

  • toggle buttons are a for selection - ie, collecting data from the user (set this to "on", use this one instead of that one, choosing from a list of options, etc) without changing the user's "location" in the app. For example, "do you like blue or red?"
  • tabs are for navigation - ie, displaying different parts of your application to the user (show me this screen, take me to this "place") without changing data. For example, "Show people who like blue" or "show people who like red"
  • I agree with your descriptions. Tabs have a strong design connection to it's view and also give a clear name to the view. Segments (toggle) do not have that connection. Tabs work better to change views within part of a page. Segments work better when the whole body of the page changes.
    – stephenz
    Commented Aug 28, 2013 at 18:53
  • I mostly agree! Though if the whole view is changing, I think link or navigation-menu-item styled are best. I like buttons and pills for "actions" or "switches" that might not change the view at all. Commented Aug 29, 2013 at 3:37
  • Take this page for example. Upvoting and "Add comment" are buttons that don't change much of the view. High-level navigation ("questions", "tags", "users", "badges" at the top of the page) are styled as links. Unfortunately, there aren't any tabs :) Commented Aug 29, 2013 at 3:39

There may not necessarily be any problems depending on the nature of your application. The trend with the 'flat' style of design means that people are encouraged to explore the user interface to find out the functions. This way they can learn by interacting with the features rather than having to go through help manuals or guides.

My suggestion is to make some distinction between the design of toggle buttons and the tabs to make it easier to remember, and label them accordingly as well. You also need to work out whether there will be conflicts between the state of the toggle buttons and the tabs (i.e. some buttons will be inactive in certain tabs), and whether the user will be aware of this. It is probably not the most common design pattern to put action buttons and tabs in the same row because of the information and layout hierarchy, but it doesn't mean that you can apply it successfully in certain situations.


I think I get what you are asking. Take a look at Bootstrap's Nav offerings. You are trying to decide between Tabs and Pills right?


If that is the case, it's a subtle choice. The biggest difference is that the tabs attach to the visible page view creating a slightly more obvious relationship. The pills are a slightly abstracted version of tabs.

Tabs are traditional, pills are more modern perhaps? If your visual design supports the affordance well, go with pills, tabs will never be misunderstood though.

Your call designer!

  • I was comparing tabs and segmented buttons (toggle) that function as tabs
    – stephenz
    Commented Aug 28, 2013 at 18:55
  • Great. Then my opinion stands. Hope it helps.
    – Itumac
    Commented Aug 28, 2013 at 19:07
  • @Itumac I think we're comparing tabs and buttons (not pills). Here's the bootstrap equivalent (scroll down to "radio") getbootstrap.com/javascript/#buttons Commented Aug 29, 2013 at 3:33
  • I would use tabs when the structure of the corresponding page changes, pills (or buttons) when they act more as a filter, eg. changing the content of a table.
    – PhiLho
    Commented Sep 15, 2015 at 16:09

I agree with @Sam Pierce Lolla's answer. There is one more addition.

Tabs are perceived as different views. That means when users navigate away and then come back to a tab, user may expect the state of the tab to be preserved.

This can not be said about the toggle buttons. The strong correlation of persistence is absent with toggle buttons.

  • If there are different views of a single component, you may use toggles.
  • If there are different sections/views altogether, tabs are more appropriate.

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.