Improve documentation for selection-buttons (old name segmented-buttons)

[kfenner]

We just took a look, this styling is needed as we use labels for the selection-buttons and we allow two variants there where we either use for="inputA" we wrap the input inside the label.

We will document these variants better in a follow-up.

/cc @dauriamarco

Originally posted by @kfenner in #588 (comment)

[ljanner]

@kfenner Is there any background or discussion around renaming segmented-buttons to selection-buttons?

I disagree with the renaming. Segmented buttons is a well-known pattern used in many (design) systems, and the term is pretty universally understood. Calling them selection buttons could be confusing - it sounds more like something related to summary-chips, multi-select or checkboxes.

Here are a few examples of how other systems name them:

• Apple – Segmented Controls
• Material Design – Segmented Buttons
• Ionic – Segment Button

The only one I found that uses a different name is Carbon’s Content Switcher, but that’s focusing on a slightly different use case.

[panch1739]

@kfenner Is there any background or discussion around renaming segmented-buttons to selection-buttons?

I disagree with the renaming. Segmented buttons is a well-known pattern used in many (design) systems, and the term is pretty universally understood. Calling them selection buttons could be confusing - it sounds more like something related to summary-chips, multi-select or checkboxes.

Here are a few examples of how other systems name them:

• Apple – Segmented Controls
• Material Design – Segmented Buttons
• Ionic – Segment Button

The only one I found that uses a different name is Carbon’s Content Switcher, but that’s focusing on a slightly different use case.

@ljanner we had a loooong discussion about this haha.

We are introducing button groups, which in retrospect would have been the more appropriate solution instead of the segmented button at the time.
However, due to our current button styling, we can’t directly replace the segmented button with a button group.

The term segmented describes a visual style (buttons appearing as connected segments), which can easily be confused with the button group component, which is by definition, an actual segmented layout container.

What we want to emphasize is the behavioral aspect: these buttons are used for making a selection among a small set of options, where only one can be active at a time.
By calling it a selection button, we shift the focus from how it looks to what it does. If you have a better proposal that adresses this is, we can be open to it...but we couldn't find anything better. @dauriamarco maybe you can share the other naming proposals? I dont remember what else we discussed ahaha

[ljanner]

@panch1739 Thanks for the context 💡

I’m okay with the rename - focusing on behavior over appearance makes sense, and it helps distinguish selection buttons from button groups 👍

It might still be worth adding a bit of guidance in the docs for when to use each, so it’s clear to consumers which one fits their use case.

[panch1739]

@panch1739 Thanks for the context 💡

I’m okay with the rename - focusing on behavior over appearance makes sense, and it helps distinguish selection buttons from button groups 👍

It might still be worth adding a bit of guidance in the docs for when to use each, so it’s clear to consumers which one fits their use case.

@ljanner yup, im working on some guides :)

[spike-rabbit]

@dauriamarco this is what you did now with the updated example, correct?

[dauriamarco]

@dauriamarco this is what you did now with the updated example, correct?

correct

EDIT: @spike-rabbit actually, it can still be better documented that there are two variants that can be used which is still not made explicit in the examples but I'm not yet sure how to do it. Otherwise we add it to to docs or use only the wrapping label one...

[spike-rabbit]

Maybe no example, just add it as code directly in the md file