Various button styles and sizes for actions and navigation.
Button Variants
Button Sizes
Theme Color Buttons
Theme Color Outline Buttons
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.
Start 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
Split Buttons
Primary action + dropdown toggle combined into a single control
Sizes
Upward Placement
Use data-placement="top-end" to open the menu upward. Floating UI will auto-flip if there's not enough space.
Custom Icons (no rotation)
Omit pa-btn-split__chevron from the icon for static icons that don't rotate on open.
Items with Actions
Menu items can include inline action buttons for quick operations like delete.
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. Note the varied text lengths to show the effect:
Inline Start Aligned
Inline End Aligned
Center Aligned
Justified
Font Awesome Icons
Font Awesome icons with varied text lengths to show alignment:
Inline Start Aligned
Inline End 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 infopa-btn--color-{1-9}- Theme color slotspa-btn--outline-color-{1-9}- Outline theme color slots
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-start- Inline-start align content (RTL: right)pa-btn--align-end- Inline-end align content (RTL: left)pa-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- End-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+
Split Buttons
pa-btn-split- Container for split buttonpa-btn-split__toggle- Toggle button (fixed square width)pa-btn-split__chevron- On the icon to opt-in to 180deg rotation on open (omit for static icons)pa-btn-split__menu- Dropdown menu panel (outer, overflow hidden)pa-btn-split__menu-inner- Inner wrapper for menu items (padding, flex layout)pa-btn-split__menu--open- Show dropdown menupa-btn-split__item- Menu item buttonpa-btn-split__item--danger- Destructive action stylingdata-placement="top-end"- Open menu upward (on container)