Button group inherits the behavior of the Checkbox or Radio button and is a form element, not a navigation element. There are two behaviors for Button group. Multiple choice, which is equivalent to selecting multiple Checkbox and single selection, which is equivalent to selecting from several Radio button. In the default state, none of the parameters are selected.

Figma component anatomy

https://www.figma.com/file/AOtI028uCFzAmnADVCz872/Documentation?node-id=2%3A4

Basic usage

Source code

<script setup>
  import { ref } from 'vue';
  import AcvButton from '@/components/button/button.vue';
  import AcvButtonGroup from '@/components/button-group/buttonGroup.vue';

  const selected = ref('Middle');
</script>

<template>
  <AcvButtonGroup
    v-model="selected"
    role="group"
    aria-label="Basic example"
    selected-type="primary"
    default-type="secondary"
  >
    <AcvButton type="secondary">
      Left
    </AcvButton>
    <AcvButton>Middle</AcvButton>
    <AcvButton type="secondary">
      Right
    </AcvButton>
  </AcvButtonGroup>
</template>

Related components

• Button
• Checkbox
• Radio

Usage

<script setup>
  import { AcvButtonGroup } from '@acronis-platform/ui-component-library';
  // or
  import ButtonGroup from '@acronis-platform/ui-component-library/components/buttonGroup';
</script>

<template>
  <AcvButtonGroup />
  <ButtonGroup />
</template>