Foundations
IntroductionButton Group
A container that groups related buttons together with consistent styling.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/button-group.jsonSizes
The default size is medium.
Variants
The default size is translucent.
Icons
Grouped buttons with icons.
Best practices
The best practices when using button groups.
- Always use the
Button component for children inside the group. - Ensure all nested buttons within the group share the same size.
- Only group buttons that are logically related, such as view switchers or pagination.
- Keep the button count between 2 to 5 items to prevent crowding on mobile.
- Use the same visual variant for all buttons inside a group.
- Clearly highlight the active button when using the group as a segmented control.
Props
The props available for the Button Group component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "prominent" | "bordered" | "secondary" | "translucent" | "ghost" | "destructive" | "translucent" | The visual style variant of the group container. |
| size | "xs" | "sm" | "default" | "lg" | "default" | Tuning heights and internal child spacing gaps. |
| magnetic | boolean | true | Enables the physics-based elastic magnetic pulling effect towards the cursor. |
| scale | boolean | true | Enables tactile spring scaling response when pressed. |
| specular | boolean | true | Enables dynamic 3D specular highlight reflections that track cursor movement. |
| specularAngle | number | undefined | Optional fixed angle for the specular light reflection. |
| liquidGlass | boolean | false | Enables physical liquid glass refraction distortion (Chromium only). |
| refractiveIndex | number | 1.5 | Index of refraction (IOR) for the glass surface curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 20 | Depth of the glass bezel refraction boundary zone (px). |
| displacementScale | number | 40 | Strength of the physical refraction displacement offset. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | 3D bezel outline profile contour style. |
| chromaticAberration | boolean | false | Enables realistic RGB channel prism splitting refraction at bezel edges. |
| saturationBoost | number | 1.3 | Color saturation boost multiplier inside refracted zone. |
| backgroundBlur | number | 0.3 | Pre-blur factor applied to background to hide SVG rendering artifacts. |