Usage

ButtonGroup connects related buttons into one group. Buttons have no gap. Separators distinguish adjacent buttons:

<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { ButtonGroup } from '@astryx-vue/core/ButtonGroup'
</script>

<template>
  <ButtonGroup label="Editing actions">
    <Button label="Copy" />
    <Button label="Cut" />
    <Button label="Paste" />
  </ButtonGroup>
</template>

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.

Examples

Basic group

Keep 2–4 closely related actions together and use a consistent variant so they read as one connected control.

Floating group

Elevation belongs to the whole group rather than an individual member, so the connected controls rise as one floating surface.