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