space between buttons in buttonGroup OR more styles for RadioGroup

[xarthurx]

Description

I used to use Veutify's chip-group to achieve sth like the above image: a few buttons that I can create v-model and filter the selection from a list, and additional icons will appear when the button is activated.

I'm recently migrating to nuxtUI as I'm using Nuxt now, but find it hard to achieve sth like the above:

• Tab are overkilling and requires a lot of code.
• ButtonGroup doesn't allow me to put space inbetween the buttons.
• Radio Group seems to limited on the styles.

Is this something the develop team will consider? Or is there a simple approach to achieve this? Thank you.

Additional context

No response

[benjamincanac]

We have it plan for v3 with Radix Vue https://www.radix-vue.com/components/toggle-group.html component.

[xarthurx]

We have it plan for v3 with Radix Vue https://www.radix-vue.com/components/toggle-group.html component.

Thank you for the reply. May I ask what is the difference between nuxt UI and radix Vue? I was assuming nuxt UI and radix UI are parallel... but you mean you're using Radix UI as a part of nuxt UI?

[benjamincanac]

At the moment we're using Headless UI https://github.com/tailwindlabs/headlessui underneath and in the next major we're migrating everything to Radix Vue, you can read more in #1289.

[benjamincanac]

Closing in favor of nuxt/ui#2409.