Action Group

The action group component should be used when you have a set of related actions or options that need to be grouped together within a limited space.

Usage

import { VActionGroup, VButton } from '@vonage/vivid-api-vue';

<script setup lang="ts">
import { VActionGroup, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VActionGroup>
    <VButton
      ><template #icon><VIcon name="reply-line" /></template
    ></VButton>
    <VButton label="copy" />
    <VButton label="paste" />
    <VButton label="submit" />
  </VActionGroup>
</template>

import { registerActionGroup } from '@vonage/vivid-api';

registerActionGroup('your-prefix');

<script type="module">
  import { registerActionGroup } from '@vonage/vivid-api';
  registerActionGroup('your-prefix');
</script>

<your-prefix-action-group>
  <vwc-button><vwc-icon slot="icon" name="reply-line"></vwc-icon></vwc-button>
  <vwc-button label="copy"></vwc-button>
  <vwc-button label="paste"></vwc-button>
  <vwc-button label="submit"></vwc-button>
</your-prefix-action-group>

API Reference

Properties

Property	Type	Description
appearance	`'fieldset' \| 'ghost'`	Sets the element's appearance
shape	`'rounded' \| 'pill'`	Sets the element's border-radius
tight	`boolean`	Indicates whether action group should have padding.

Property	Type	Description
appearance	`'fieldset' \| 'ghost'`	Sets the element's appearance
shape	`'rounded' \| 'pill'`	Sets the element's border-radius
tight	`boolean`	Indicates whether action group should have padding.

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.