Various button styles and sizes for actions and navigation.

Button Variants

Button Sizes

Outline Buttons

Button States

Block Buttons

Button Groups

Horizontal Button Group

Vertical Button Group

Buttons with Text Icons

Buttons with icons are automatically left-aligned with fixed-width icon container:

Icon Only Buttons

Icon-only button sizes (XS → XL):

Various colors - default size:

Compact (XS) - perfect for table actions:

With ripple and loading states (click to test):

Fixed Width Buttons

Use fixed-width classes for consistent button sizing regardless of text length:

Different Width Multipliers (1x = 1rem)

Button Text Alignment

Control text alignment within fixed-width buttons:

Left Aligned (icon has no left padding)

Right Aligned (icon has no right padding)

Center Aligned

Justified

Font Awesome Icons

Demonstrating Font Awesome icons with alignments:

Left Aligned

Right Aligned

Center Aligned

Justified

Ripple Effect Buttons

Click buttons to see ripple animation effect:

Loading State Buttons

Click buttons to simulate loading states:

Usage Guide

Ripple Effect

Add pa-btn--ripple class and data-ripple attribute to any button for click animation feedback.

Loading States

Use pa-btn--loading class to show spinner. JavaScript can toggle this class during async operations.

Best Practices

  • Fast Sites: Always show loading feedback, even for quick operations (200-500ms minimum)
  • User Confidence: Ripple effects confirm button clicks were registered
  • Prevent Double-clicks: Disable buttons during loading to prevent duplicate submissions
  • Accessibility: Loading states are announced to screen readers
Type to search or use /p for products, /o for orders, /u for users, /i for invoices

Settings

👤

John Doe

Administrator