Action Button

<pa-action-button> | PaActionButton

A specialized action button component designed for dashboard-style interfaces. Features a vertical layout with an icon above a text label, perfect for action panels, toolbars, and quick-action menus.

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

Examples

Basic Usage

<template>
  <pa-action-button icon="plus-solid" @click="handleAdd" />
</template>

<script setup>
const handleAdd = () => {
  console.log('Add clicked!')
}
</script>

With Label

Action buttons can include text labels for clearer context.

<template>
  <pa-action-button label="Save" icon="check-solid" @click="handleSave" />
</template>

<script setup>
const handleSave = () => {
  console.log('Save clicked!')
}
</script>

Icon Variants

The action button supports different icon color variants to match your design system.

<template>
  <div>
    <pa-action-button label="Primary" icon="check-solid" icon-variant="primary" />
    <pa-action-button label="Secondary" icon="edit-solid" icon-variant="secondary" />
    <pa-action-button label="Success" icon="check-circle-solid" icon-variant="success" />
    <pa-action-button label="Danger" icon="times-solid" icon-variant="danger" />
  </div>
</template>

Disabled State

Action buttons can be disabled to prevent user interaction.

<template>
  <div>
    <pa-action-button label="Enabled" icon="check-solid" />
    <pa-action-button label="Disabled" icon="check-solid" :disabled="true" />
  </div>
</template>

TODO

Loading state with spinner is not currently working and needs to be fixed and correctly implemented.

Icon-Only Usage

Action buttons can be used without a label for compact layouts.

<template>
  <div>
    <pa-action-button icon="check-solid" />
    <pa-action-button icon="edit-solid" />
    <pa-action-button icon="times-solid" icon-variant="danger" />
  </div>
</template>

Action Button Groups

Action buttons work well in groups for action panels or toolbars.

<template>
  <div>
    <pa-action-button label="New" icon="plus-solid" @click="handleNew" />
    <pa-action-button label="Edit" icon="edit-solid" @click="handleEdit" />
    <pa-action-button label="Save" icon="check-solid" @click="handleSave" />
    <pa-action-button label="Delete" icon="times-solid" icon-variant="danger" @click="handleDelete" />
    <pa-action-button label="Copy" icon="copy-solid" @click="handleCopy" />
    <pa-action-button label="Download" icon="download-solid" @click="handleDownload" />
  </div>
</template>

Icon Style Variations

While solid icons are recommended for action buttons, you can use different FontAwesome styles for subtle design variations.

<template>
  <div>
    <pa-action-button label="Light" icon="edit-light" icon-variant="secondary" />
    <pa-action-button label="Regular" icon="edit-regular" icon-variant="secondary" />
    <pa-action-button label="Solid" icon="edit-solid" icon-variant="primary" />
  </div>
</template>

Importing

import { PaActionButton } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
label	Text label displayed below the icon.	no	string	''
icon	Icon name to display. Uses the pa-icon component internally.	no	string	undefined
iconVariant	Color variant for the icon (primary, secondary, success, danger, etc.).	no	string	'primary'
disabled	Whether the button is disabled and unclickable.	no	boolean	false
preventDefault	Whether to prevent the default click behavior.	no	boolean	false

Events

Name	Description	Event Detail
click	Emitted when the action button is clicked (unless disabled).	The component instance

Dependencies

• PaIcon: Required for displaying icons. The icon prop value is passed to the pa-icon component.
• Uses FontAwesome icons with style suffixes (e.g., -solid, -regular, -light, -brand)
• For a complete list of available icons, see the PaIcon component documentation

Icon Usage Notes

Action buttons work best with solid FontAwesome icons for better visibility and emphasis. Common icon patterns:

• Actions: check-solid, times-solid, plus-solid, edit-solid
• Data operations: copy-solid, download-solid, upload-solid, save-solid
• Navigation: arrow-left-solid, arrow-right-solid, chevron-down-solid
• Status indicators: info-circle-solid, exclamation-triangle-solid, check-circle-solid

Design Notes

The action button component uses a vertical layout (75px height) with:

• 40x40px icon container with centered 22x22px icon
• 12px font-size label with 600 font-weight
• 12px border-radius for modern appearance
• Hover effects with box-shadow
• Focus states with border and shadow
• Active state with background color inversion
• Disabled state with muted colors

This component is ideal for:

• Dashboard action panels
• Toolbar quick actions
• Card-based interfaces
• Mobile-friendly touch targets
• Action menus and palettes