The <luna-button-group> component groups buttons together for toolbars and related actions.
Paths
/lunadom/components/button-group/button-group.js REQUIRED
/lunadom/components/button/button.js REQUIRED
/lunadom/components/dropdown/dropdown.js
/lunadom/components/menu/menu.js
Example
Undo
Redo
Connected Groups
Undo
Redo
Option A
Option B
Option C
With Dropdown
Edit
Duplicate
Archive
Delete
Spaced Toolbar
Save
Edit
Delete
Vertical & Fullwidth
Profile Settings
Security
Integrations
Customization
Slots
default - Buttons to group
Attributes
spacing - Gap between items (e.g., '0.5rem'). Defaults to '0' (connected)
vertical - Stack items vertically
fullwidth - Stretch to fill parent width
pill - Pill-shaped outer corners
CSS Variables
--luna-button-group-gap - Gap between items (overrides spacing attribute)
--luna-button-group-radius - Outer corner radius (overrides pill default)
Example Code
<!-- Connected Groups -->
<luna-button-group>
<luna-button variant="neutral">Undo</luna-button>
<luna-button variant="neutral">Redo</luna-button>
</luna-button-group>
<!-- Pill Style -->
<luna-button-group pill>
<luna-button variant="neutral">Option A</luna-button>
<luna-button variant="neutral">Option B</luna-button>
<luna-button variant="neutral">Option C</luna-button>
</luna-button-group>
<!-- With Dropdown -->
<luna-button-group>
<luna-button variant="neutral">Edit</luna-button>
<luna-dropdown placement="bottom-end">
<luna-button slot="trigger" variant="neutral" caret></luna-button>
<luna-menu>
<luna-menu-item>Duplicate</luna-menu-item>
<luna-menu-item>Archive</luna-menu-item>
<luna-divider></luna-divider>
<luna-menu-item variant="danger">Delete</luna-menu-item>
</luna-menu>
</luna-dropdown>
</luna-button-group>
<!-- Spaced Toolbar -->
<luna-button-group spacing="0.75rem">
<luna-button variant="neutral">Save</luna-button>
<luna-button variant="neutral">Edit</luna-button>
<luna-button variant="danger">Delete</luna-button>
</luna-button-group>
<!-- Vertical & Fullwidth -->
<luna-button-group vertical fullwidth>
<luna-button variant="neutral">Profile Settings</luna-button>
<luna-button variant="neutral">Security</luna-button>
<luna-button variant="neutral">Integrations</luna-button>
</luna-button-group>