Various button styles and sizes for actions and navigation.
Button Variants
Button Sizes
Outline Buttons
Button States
Block Buttons
Button Groups - Basic
Horizontal (default)
Vertical
No-Wrap (prevents line breaks)
Button Groups - Gap Sizes
Semantic Gap Classes
gap-xs (4px)
gap-sm (8px)
gap-md (12px)
gap-base (16px)
gap-lg (24px)
gap-xl (32px)
Vertical Alignment
Use semantic gap classes (gap-sm, gap-md, gap-lg, gap-xl) to control vertical spacing between buttons.
Left gap-sm
Center gap-md
End gap-lg
Stretch gap-xl
Responsive Direction
Horizontal → Vertical at md (768px)
Resize window to see change
Vertical → Horizontal at lg (992px)
Starts vertical, becomes horizontal on large screens
Class Reference
--sm-vertical/--sm-horizontalat 576px--md-vertical/--md-horizontalat 768px--lg-vertical/--lg-horizontalat 992px--xl-vertical/--xl-horizontalat 1200px
Text Truncation
Use .text-truncate with a fixed width (.wr-*) to truncate long text with ellipsis
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 minwr-* + maxwr-* to constrain width. Add text-truncate on an inner span for ellipsis:
Different Widths (minwr-8 to minwr-20)
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
CSS Classes Reference
Button Base
pa-btn- Base button styling
Button Variants (Colors)
pa-btn--primary- Primary accent colorpa-btn--secondary- Secondary/neutral colorpa-btn--success- Success/green colorpa-btn--warning- Warning/yellow colorpa-btn--danger- Danger/red colorpa-btn--info- Info/blue colorpa-btn--light- Light backgroundpa-btn--dark- Dark background
Outline Variants
pa-btn--outline-primary- Outline primarypa-btn--outline-secondary- Outline secondarypa-btn--outline-success- Outline successpa-btn--outline-warning- Outline warningpa-btn--outline-danger- Outline dangerpa-btn--outline-info- Outline info
Button Sizes
pa-btn--xs- Extra small buttonpa-btn--sm- Small buttonpa-btn--lg- Large buttonpa-btn--xl- Extra large button
Button States & Modifiers
pa-btn--loading- Loading state with spinnerpa-btn--ripple- Enable ripple click effectpa-btn--block- Full width block buttonpa-btn--icon-only- Square icon-only button
Content Alignment
pa-btn--align-left- Left-align contentpa-btn--align-right- Right-align contentpa-btn--align-center- Center-align contentpa-btn--align-justify- Space-between content
Button Elements
pa-btn__icon- Icon container with fixed widthpa-btn__spinner- Loading spinner element
Button Groups
pa-btn-group- Container for grouped buttonspa-btn-group--vertical- Vertical stackingpa-btn-group--nowrap- Prevent wrapping
Button Group Alignment (vertical only)
pa-btn-group--center- Center-align buttonspa-btn-group--end- Right-align buttonspa-btn-group--stretch- Full width buttons
Responsive Button Groups
pa-btn-group--sm-vertical- Vertical at 576px+pa-btn-group--sm-horizontal- Horizontal at 576px+pa-btn-group--md-vertical- Vertical at 768px+pa-btn-group--md-horizontal- Horizontal at 768px+pa-btn-group--lg-vertical- Vertical at 992px+pa-btn-group--lg-horizontal- Horizontal at 992px+pa-btn-group--xl-vertical- Vertical at 1200px+pa-btn-group--xl-horizontal- Horizontal at 1200px+