0

I have multiple toggle buttons each with around 3-5 values. The problem lies in the text, where some buttons are much longer than others. Is it better practice to make all buttons the same size regardless of text length, or make each button's size dynamic to the text?

Here, all buttons are the same size

enter image description here

Each button is dependent on text length

enter image description here

Improve this question
4
  • 1
    Are these tabs or just radio buttons? A toggle button is a button with two states: checked and unchecked. This is confusing...
    – Madalina Taina
    Commented Feb 22 at 10:01
  • @MadalinaTaina radio buttons
    – Gene
    Commented Feb 22 at 17:04
  • the proper name is segmented buttons, to differentiate them from split buttons
    – Devin
    Commented Feb 22 at 21:42
  • @Devin Ah I knew it was called something else. I just couldn't quite remember it, thanks!
    – Gene
    Commented Feb 22 at 22:32

3 Answers 3

Reset to default
2

I guess it depends.

In Material Design, they should be the same width. Here you can see the segmented buttons with icons because the content width is more noticeable:

enter image description here

But you can see that without icons, it's still the same:

enter image description here

Carbon Design System is the same:

enter image description here

However, there are examples where this is not the case, such as Bootstrap:

enter image description here

However, in your specific case, you have very long labels against very short ones, so you could use that to your advantage in order to provide a quick scan.

In short: while in general, segmented buttons tend to be the same width, it's not necessarily the case, and I think your use case merits using different sizes.

EDIT: As @exp mentions, there is another component in Carbon that differs from the one I mentioned. From what I understand, I still believe the component I mentioned is the correct one for your use case. However, if you need to toggle between content views, then the Content Switcher is the correct one.

Improve this answer
2
  • 1
    You're using wrong example for Carbon. In CDS they call this component "Content Switcher" (carbondesignsystem.com/components/content-switcher/usage), but they still should be the same width: "Each content tab in the group should be the same width"
    – exp
    Commented Feb 26 at 12:17
  • Thank you, added to teh answer :)
    – Devin
    Commented Feb 26 at 17:10
4

You have the answer on this page:

enter image description here

My only recommendation for size changes would be, in texts of more than one word, to establish a maximum number of characters, for example, not to exceed twenty.

The first example, with all the buttons of the same size, having different text lengths, I think creates confusion:

  • Due to the difference in exterior margins. The blank spaces in this case are as relevant as the occupied areas.

  • This difference in margins means that long texts can contact the active button, which makes it look like the text is indicative of the next button:

    Automatic (LTE or less): 3G Only

Improve this answer
1
  • 1
    to establish a maximum number of characters, for example, not to exceed twenty. This is very good advice
    – Devin
    Commented Feb 22 at 22:40
2

At first thought I agree with Danielillo. Keep the width variable to the words and keep the paddings the same.

But it might depend on context. In the case below, where the button group is used in a modal/dialog, it's a bit cleaner to use fixed widths in order to align everything better.

enter image description here

Improve this answer
1
  • this actually is used inside a dialog where I have multiple buttons of different length on the same form. The fixed widths does help all forms align well, but it makes the 3 and 5 radio button sets the same width. I think that could be confusing with each radio button being different sizes
    – Gene
    Commented Feb 22 at 17:07

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.