Nav Button

<pa-nav-button> | PaNavButton

A navigation button component designed for navigation menus and panels. Features a large button layout with optional icon, label, sub-label, and action indicators. Can be used individually or within a nav button group for selection behavior.

<pa-nav-button label="Credit Card" icon="plus-solid" />

Examples

Basic Usage

<template>
  <pa-nav-button 
    label="Bank Account" 
    icon="plus-solid" 
    @click="handleNavigation" 
  />
</template>

<script setup>
const handleNavigation = () => {
  console.log('Navigate to bank account')
}
</script>

With Sub Label

Navigation buttons can include a secondary label for additional context.

<template>
  <pa-nav-button 
    label="Credit Card" 
    sub-label="With Fraud Protection" 
    icon="plus-solid" 
  />
</template>

Icon Variants

Choose between dark and light icon variants to match your design.

<template>
  <div>
    <pa-nav-button 
      label="Dark Icon (Default)" 
      icon="plus-solid" 
      icon-variant="dark" 
    />
    <pa-nav-button 
      label="Light Icon" 
      icon="plus-solid" 
      icon-variant="light" 
    />
  </div>
</template>

Action Icons

Display action icons to show supported payment methods or other contextual indicators.

<template>
  <pa-nav-button 
    label="Credit Card" 
    sub-label="Supported Cards" 
    icon="plus-solid" 
    :action-icons="['cc-mastercard-brand', 'cc-visa-brand', 'cc-amex-brand']" 
  />
</template>

Action Label

Use an action label instead of icons for descriptive text.

<template>
  <pa-nav-button 
    label="Online Banking" 
    icon="plus-solid" 
    action-label="for your financial needs" 
  />
</template>

Hide Action Arrow

Remove the action arrow for cleaner presentation.

<template>
  <pa-nav-button 
    label="Simple Navigation" 
    icon="plus-solid" 
    action-label="Clean design" 
    :show-action-arrow="false" 
  />
</template>

Hide All Actions

Hide the entire action section for minimal presentation.

<template>
  <pa-nav-button 
    label="Minimal Button" 
    icon="plus-solid" 
    :show-actions="false" 
  />
</template>

Disabled State

Navigation buttons can be disabled to prevent interaction.

<template>
  <div>
    <pa-nav-button 
      label="Enabled Button" 
      icon="plus-solid" 
      :action-icons="['cc-mastercard-brand', 'cc-visa-brand']" 
    />
    <pa-nav-button 
      label="Disabled Button" 
      icon="plus-solid" 
      :action-icons="['cc-mastercard-brand', 'cc-visa-brand']" 
      :disabled="true" 
    />
  </div>
</template>

Selection State

Navigation buttons can be selected and support v-model binding.

<template>
  <div>
    <pa-nav-button 
      label="Not Selected" 
      icon="plus-solid" 
      v-model:selected="selection1" 
    />
    <pa-nav-button 
      label="Selected" 
      icon="plus-solid" 
      v-model:selected="selection2" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selection1 = ref(false)
const selection2 = ref(true)
</script>

Automation Testing Support

Navigation buttons include props for test automation.

<template>
  <pa-nav-button 
    label="Testable Button" 
    icon="plus-solid" 
    sf-selector="payment-method-selector" 
    sf-value="credit-card" 
  />
</template>

Importing

import { PaNavButton } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
label	Main label text displayed on the button.	no	string	Required
subLabel	Secondary label text displayed below the main label.	no	string	''
icon	Icon name to display. Uses the pa-icon component internally.	no	string	''
iconVariant	Color variant for the icon container.	no	'dark' | 'light'	'dark'
actionLabel	Descriptive text displayed in the action area.	no	string	''
actionIcons	Array of icon names to display in the action area.	no	string[]	[]
actionIconVariant	Color variant for action icons.	no	string	'dark'
showActionArrow	Whether to show the arrow icon in the action area.	no	boolean	true
showActions	Whether to show the entire action area.	no	boolean	true
disabled	Whether the button is disabled and unclickable.	no	boolean	false
selected	Whether the button is currently selected.	no	boolean	false
sfSelector	Selector for automation testing.	no	string	''
sfValue	Value for automation testing.	no	string	''

Events

Name	Description	Event Detail
click	Emitted when the button is clicked (unless disabled).	The component instance
update:selected	Emitted when selection state changes (for v-model support).	boolean

Slots

This component does not use slots.

Dependencies

• PaIcon: Required for displaying icons. The icon prop value is passed to the pa-icon component.
• PaSquare: Used for the icon container background.
• 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

Navigation buttons work well with various FontAwesome icons:

• Financial: plus-solid, credit-card-solid, university-solid, wallet-solid
• Actions: arrow-right-regular, check-solid, edit-solid
• Brands: cc-mastercard-brand, cc-visa-brand, cc-amex-brand, cc-discover-brand
• Interface: home-solid, settings-solid, user-solid, bell-solid

Design Notes

The navigation button component features:

• Large button layout: Designed for touch-friendly navigation
• Icon integration: Optional icon with dark/light variants in a square container
• Flexible content: Main label, sub-label, and action area
• Selection states: Visual feedback for selected/unselected states
• Action indicators: Support for action icons, labels, and arrows
• Individual behavior: Can work standalone or within a nav button group

Layout specifications:

• Large button size (btn-lg) for easy interaction
• Icon displayed in a pa-square container
• Text content aligned to the left
• Action area aligned to the right
• Disabled and selected states with appropriate visual feedback

This component is ideal for:

• Navigation menus and sidebars
• Payment method selection
• Settings and preferences panels
• Dashboard navigation
• Mobile-friendly menu systems
• Multi-step form navigation

Group Usage

When used within a PaNavButtonGroup, the button automatically participates in group selection behavior. For detailed information about grouping navigation buttons, see the PaNavButtonGroup documentation.

Accessibility Notes

• Uses proper button semantics with type="button"
• Maintains focus states for keyboard navigation
• Provides visual feedback for selection and disabled states
• Action icons include monochrome variants for better contrast
• Supports automation testing with sf-selector and sf-value props

Related Components

• PaNavButtonGroup: For grouping navigation buttons with mutual selection
• PaActionButton: For action-oriented buttons
• PaButton: For general-purpose buttons

Importing

import { PaNavButton } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
label	Main label text displayed on the button.	no	string	Required
subLabel	Secondary label text displayed below the main label.	no	string	''
icon	Icon name to display. Uses the pa-icon component internally.	no	string	''
iconVariant	Color variant for the icon container.	no	'dark' | 'light'	'dark'
actionLabel	Descriptive text displayed in the action area.	no	string	''
actionIcons	Array of icon names to display in the action area.	no	string[]	[]
actionIconVariant	Color variant for action icons.	no	string	'dark'
showActionArrow	Whether to show the arrow icon in the action area.	no	boolean	true
showActions	Whether to show the entire action area.	no	boolean	true
disabled	Whether the button is disabled and unclickable.	no	boolean	false
selected	Whether the button is currently selected.	no	boolean	false
sfSelector	Selector for automation testing.	no	string	''
sfValue	Value for automation testing.	no	string	''

Events

Name	Description	Event Detail
click	Emitted when the button is clicked (unless disabled).	The component instance
update:selected	Emitted when selection state changes (for v-model support).	boolean

Slots

This component does not use slots.

Dependencies

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

Design Notes

The navigation button component features:

• Large button layout: Designed for touch-friendly navigation
• Icon integration: Optional icon with dark/light variants in a square container
• Flexible content: Main label, sub-label, and action area
• Selection states: Visual feedback for selected/unselected states
• Action indicators: Support for action icons, labels, and arrows
• Individual behavior: Can work standalone or within a nav button group

Layout specifications:

• Large button size (btn-lg) for easy interaction
• Icon displayed in a pa-square container
• Text content aligned to the left
• Action area aligned to the right
• Disabled and selected states with appropriate visual feedback

This component is ideal for:

• Navigation menus and sidebars
• Payment method selection
• Settings and preferences panels
• Dashboard navigation
• Mobile-friendly menu systems
• Multi-step form navigation

Group Usage

When used within a PaNavButtonGroup, the button automatically participates in group selection behavior. For detailed information about grouping navigation buttons, see the PaNavButtonGroup documentation.

Accessibility Notes

• Uses proper button semantics with type="button"
• Maintains focus states for keyboard navigation
• Provides visual feedback for selection and disabled states
• Action icons include monochrome variants for better contrast
• Supports automation testing with sf-selector and sf-value props

Related Components

• PaNavButtonGroup: For grouping navigation buttons with mutual selection
• PaActionButton: For action-oriented buttons
• PaButton: For general-purpose buttons