Button Group generator
Segmented controls — view switchers, time-range pickers, toggle groups — all use the same lightning-button-group shell. Style the shared border, active state and hover so the group reads as one control, not three buttons glued together.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-button-group class="studio-btngroup">
<template for:each={buttons} for:item="btn">
<lightning-button key={btn.label} label={btn.label} variant={btn.variant} onclick={handleSelect}></lightning-button>
</template>
</lightning-button-group>
</template>Design tips for button groups
- Keep exactly one button visually "active" at a time so the control reads as a single choice, not a menu.
- Match the group border radius to the rest of your buttons so it does not look like a separate component.
- Use it for 2–5 mutually exclusive options; beyond that, a select or combobox scales better.