Components Overview

Explore the PayAdvantage UI Components library. Each component is designed to be flexible, accessible, and easy to integrate into your Vue 3 applications.

Available Components

Action Components

Components for user actions and interactions.

• Action Button - Specialized action button component
• Action Button Group - Grouped action buttons
• Action Group - General action grouping component
• Button - Versatile button with variants, sizes, and states
• Nav Button - Navigation-specific button component

Form Components

Interactive components for building forms and capturing user input.

• Checkbox - Checkbox input with label support
• Currency Input - Specialized currency input field
• Date Picker - Date selection component
• Dropdown - Dropdown selection menu
• Form - Form wrapper with validation support
• Input - Text input field component
• Option Group - Radio/checkbox option grouping
• Phone Number Input - Phone number input with formatting
• Radio - Radio button input component
• Slider - Range slider input component
• Switch - Toggle switch component
• Toggle - Toggle button component

Display Components

Components for displaying content and information.

• Badge - Small status or count indicator
• Circle - Circular display element
• Divider - Content separator line
• Hero - Hero section component
• Icon - Icon display component
• List Item - Individual list item component
• Square - Square display element

Layout Components

Components for structuring and organizing page layouts.

• Container - Content container wrapper
• Content Separator - Section content separator
• Sheet - Content sheet component
• Slotted Layout - Flexible slotted layout system

Feedback Components

Components for user feedback and notifications.

• Modal - Modal dialog component
• B Modal - Bootstrap-compatible modal
• Notification - Toast notification component

Quick Start Example

Here's how easy it is to get started with PayAdvantage components:

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

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

Design Principles

All PayAdvantage components are built with these core principles:

• Accessibility First - WCAG compliant with proper ARIA support
• TypeScript Ready - Full type definitions for better DX
• Flexible Theming - Customizable to match your brand
• Consistent API - Predictable props and events across components
• Performance Optimized - Tree-shakable and lightweight

Getting Help

• Use the sidebar navigation to explore individual component documentation
• Each component page includes detailed API references and live examples
• Check out our Getting Started guide for setup instructions

Contributing

Found a bug or want to suggest an improvement? Visit our repository to contribute!