Action Button Group

<pa-action-button-group> | PaActionButtonGroup

A simple container component that groups action buttons together with consistent spacing. Provides uniform layout for multiple related action buttons.

<pa-action-button-group>
  <pa-action-button icon="plus-solid" />
  <pa-action-button icon="edit-solid" />
  <pa-action-button icon="save-solid" />
</pa-action-button-group>

Examples

Basic Usage

<template>
  <pa-action-button-group>
    <pa-action-button icon="plus-solid" @click="handleAdd" />
    <pa-action-button icon="edit-solid" @click="handleEdit" />
    <pa-action-button icon="trash-solid" @click="handleDelete" />
  </pa-action-button-group>
</template>

<script setup>
const handleAdd = () => console.log('Add clicked!')
const handleEdit = () => console.log('Edit clicked!')
const handleDelete = () => console.log('Delete clicked!')
</script>

With Labels

<template>
  <pa-action-button-group>
    <pa-action-button label="New" icon="plus-solid" />
    <pa-action-button label="Edit" icon="edit-solid" />
    <pa-action-button label="Save" icon="save-solid" />
    <pa-action-button label="Delete" icon="trash-solid" icon-variant="danger" />
  </pa-action-button-group>
</template>

Importing

import { PaActionButtonGroup } from '@payadvantage/ui_components'

Properties

This component does not define any props. Layout and styling are handled through CSS classes.

Events

This component does not emit its own events. Events are handled by individual action buttons within the group.

Slots

Name	Description
(default)	Contains the action buttons to be grouped. Expected to contain pa-action-button components.

Dependencies

• PaActionButton: Designed to contain pa-action-button components
• For available icons, see the PaIcon component documentation