Button

<pa-button> | PaButton

Buttons are essential interactive elements for user actions in your Vue 3 applications. Use buttons to trigger actions, submit forms, navigate between pages, or execute specific functions. PayAdvantage buttons provide consistent styling, accessibility, and behavior across your application.

Usage

The most common button implementation with text content and click handling.

<template>
  <pa-button @click="handleClick">Click Me</pa-button>
</template>

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

Examples

Basic Example

<template>
  <pa-button>Default Button</pa-button>
</template>

Variants

Choose from multiple visual styles to match your design system and convey different meanings.

<template>
  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
    <pa-button variant="primary">Primary</pa-button>
    <pa-button variant="secondary">Secondary</pa-button>
    <pa-button variant="tertiary">Tertiary</pa-button>
    <pa-button variant="success">Success</pa-button>
    <pa-button variant="danger">Danger</pa-button>
    <pa-button variant="warning">Warning</pa-button>
    <pa-button variant="info">Info</pa-button>
    <pa-button variant="light">Light</pa-button>
    <pa-button variant="dark">Dark</pa-button>
    <pa-button variant="white">White</pa-button>
  </div>
</template>

Outline Variants

Outline variants provide a lighter visual weight while maintaining brand consistency.

<template>
  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
    <pa-button variant="outline-primary">Outline Primary</pa-button>
    <pa-button variant="outline-secondary">Outline Secondary</pa-button>
    <pa-button variant="outline-success">Outline Success</pa-button>
    <pa-button variant="outline-danger">Outline Danger</pa-button>
    <pa-button variant="outline-warning">Outline Warning</pa-button>
    <pa-button variant="outline-info">Outline Info</pa-button>
  </div>
</template>

Sizes

Three size options to fit different layouts and importance levels.

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-button size="sm" variant="primary">Small</pa-button>
    <pa-button size="md" variant="primary">Medium</pa-button>
    <pa-button size="lg" variant="primary">Large</pa-button>
  </div>
</template>

With Icons

Add icons to provide visual context and improve usability.

<template>
  <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
    <pa-button icon="plus-solid" variant="primary">Add Item</pa-button>
    <pa-button icon="trash-alt-solid" variant="danger">Delete</pa-button>
    <pa-button icon="save-solid" variant="success" icon-right>Save Changes</pa-button>
    <pa-button icon="cog-solid" variant="secondary" size="sm"></pa-button>
    <pa-button icon="user-solid" variant="primary" shape="circle"></pa-button>
  </div>
</template>

Button States

Handle different interaction states for better user experience.

<template>
  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
    <pa-button variant="primary">Normal</pa-button>
    <pa-button variant="primary" disabled>Disabled</pa-button>
    <pa-button variant="primary" :is-loading="true">Loading</pa-button>
  </div>
</template>

Block Buttons

Full-width buttons for prominent actions or mobile layouts.

<template>
  <div style="max-width: 300px;">
    <pa-button variant="primary" block>Full Width Button</pa-button>
  </div>
</template>

Importing

import { PaButton } from '@payadvantage/ui-components'

Slots

Slot Name	Description
default	The main content area for button text or elements

Properties

Property	Type	Default	Description
variant	String	null	Visual style variant. Options: primary, secondary, tertiary, success, danger, warning, info, light, dark, white, outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light, outline-dark
size	String	null	Button size. Options: sm, md, lg
disabled	Boolean	false	Whether the button is disabled
block	Boolean	false	Whether the button should take the full width of its container
isLoading	Boolean	false	Whether the button is in a loading state (shows spinner)
icon	String	undefined	Icon name to display. Uses pa-icon component
iconRight	Boolean	false	Whether to position the icon on the right side of the text
shape	String	'square'	Button shape. Options: square, circle
type	String	'button'	HTML button type attribute. Options: button, submit, reset
sfSelector	String	''	Selector for Salesforce testing automation

Events

Event	Parameters	Description
click	button: PaButton	Emitted when the button is clicked. Receives the button component instance

Dependencies

• pa-icon - Used for displaying icons within buttons