Button Group @astryx-svelte/core v0.3.0 · ButtonGroup
Usage
ButtonGroup joins related actions into a single connected control. Use it when multiple buttons represent related choices or operations that belong together visually, like copy/cut/paste, or undo/redo.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Group buttons that perform related actions on the same object, like copy, cut, paste on selected text. |
| Do | Use the same variant for all buttons in a group so they look like a single connected unit. |
| Do | Keep groups small (2–4 buttons). For more actions, use a Toolbar or DropdownMenu instead. |
| Don't | Don't mix wildly different actions. A Save button next to a Delete button in the same group is confusing. |
| Don't | Don't use ButtonGroup for navigation. Use SegmentedControl or TabList for switching between views. |
| Don't | Don't nest ButtonGroups. If you need multiple groups, place them side by side with a gap. |
Examples
Common configurations, variations, and states.ButtonGroup — Basic
Three related actions joined into a single connected control. Provide a group label for accessibility and keep all buttons the same variant so they read as one unit.
ButtonGroup — Floating
A grouped action bar raised with
elevation="med". The connected buttons share one surface, so the shadow lifts them as a unit.