Why is there no Button Group when you have a Checkbox Group?

[binarykitchen]

Good evening,

Deaf programmer from New Zealand here, checking out your library for first time. I'm impressed ...

Just curious, why is there no ButtonGroup component when there is one for Checkboxes?

Curious here ...

PS: I wanted to post this under discussions, but couldn't find a button to start a discussion. Perhaps deactivated on your side?

[mj12albert]

We have a toggle group, is that what you're looking for? @binarykitchen

[binarykitchen]

Ah yes, that.

I come from a MUI world and there it's called ButtonGroup:
https://mui.com/material-ui/react-button-group/

But they also provide a ToogleGroup there. A bit confusing 😅

[mj12albert]

The reason is that "button group" (non-toggles) is just a role="group" around some normal buttons, so there isn't anything that a headless lib could add

ToggleGroup has toggle buttons, but also roving focus (keyboard nav). You could also make a "button group" with the Toolbar component, which supports regular buttons as well as toggle buttons.

[binarykitchen]

Ah, interesting, we are getting closer. Yep, toolbar might be what I'm after.
Although I'm a bit but unsure which Toolbar exports to use. Toolbar.Root, Toolbar.Button or Button?

In other words, here's a real example:

How would you implement those "Resume" and "Stop" button using Base-UI if I may ask?

[mj12albert]

Since it's only 2 buttons (2 tab stops) roving focus doesn't seem necessary, they could be <Button> components (possibly in a generic div role="group")

If the buttons are disabled depending on the playback status (e.g. disable "Resume" when playing) the focusableWhenDisabled prop can be used so maintain tab order and keep the button discoverable by SRs

[binarykitchen]

Great input @mj12albert - I think I'll go for this.

Last question: it's a component library, unstyled, although I'd like to have some "natural" spacings between those two buttons without the need for styling and CSS (so that I can test it on Storybook).

Is there some component providing spaces between buttons or a native HTML tag which does this?

Thanks for your feedback.

[mj12albert]

Is there some component providing spaces between buttons

You could probably make something like Material UI's Stack component (or some libraries just call it <Flex>)

[binarykitchen]

Thanks, but I'd rather not mix base-ui with Material UI.
This to keep it unstyled while there is still a gap between those two buttons.

In other words, is there some native HTML markup providing some gaps between HTML elements like buttons without CSS?

[LukasTy]

In other words, is there some native HTML markup providing some gaps between HTML elements like buttons without CSS?

Is there some specific reason why you don't want to use CSS?
HTML is just functional, CSS is for looks.
Some elements might have styles you could be looking for, but are you sure about their stability? Because default styles for elements are browser-dependent.
That's why in the majority of cases, applications tend to apply a CSS Reset to start from a blank slate and aim to reach uniform styling regardless of the browser.

If possible, I suggest using the default tools of the platform. 👍

[binarykitchen]

Good questions @LukasTy

https://github.com/binarykitchen/videomail-recorder becomes a theme-less React component library for reuse. This wit Base UI components without themes (themeless).

It uses Storybooks for visual tests

I don't want to apply a CSS reset. Stick to default HTML and CSS for stories. That's why I'm asking for some native spacings between HTML buttons using browser defaults without applying for a theme.

Another idea: perhaps crazy, should I pick some random Base UI theme for stories only but not to export these in the component library?