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.
Overflow Toolbar
Buttons collapse into a dedicated [⋮] more menu when the row runs out of horizontal space, and pop back out as room returns
Drag the resize handle in the bottom-right of the box below to shrink the bar. Lowest
data-pa-actions-priority
(default 0) drops into the [⋮]
menu first; ties broken by the child nearest the end. "Publish" is pinned
with data-pa-actions-priority="10", "Members" with 15, and "Run"
stays visible longest with 20. Drag all the way in and even a split button
collapses into the [⋮]
menu as an atomic labeled group — its primary plus its
own options, nothing foreign mixes in. The "Members" split button's rows carry inline delete
buttons that survive the collapse and still fire.
Drop direction & ghost trigger
Default drops the child nearest the end first. Set overflow_from="start" to drop
the leftmost child first instead. This bar also uses trigger="ghost" for the
chromeless [⋮] look.
In card headers
In a card header, set actions_variant="overflow"
on the <.card>
—
the :tools
become direct children of .pa-card__actions--overflow
(no
inner wrapper), it appends its own [⋮]
more-menu, and the title yields before the
actions collapse. Laid out three-up so each card is already narrow — resize the window to watch
each toolbar collapse at its own breakpoint.
Quarterly Performance & Customer Engagement Analytics Dashboard
The actions bar in the header carries the overflow behavior — narrow the window to watch
Configure, Filter, and Refresh fold into the [⋮] more-menu in that order
(lowest priority first; Export is pinned, and the Add-widget split button survives longest).
Database Migration Tasks — Production Environment Schema Updates
No pinning here — siblings collapse in default order (rightmost first: Rollback → Backup →
Validate). The Deploy split button survives longest, dropping into the [⋮]
more-menu as an atomic labeled group.
Team Members & Permissions Management — Enterprise Console
Six siblings — Invite is pinned with priority 5, so it survives the first wave of collapses
but still folds away before Add user. The title yields first (truncating to a min-width
floor) so the action bar keeps its buttons; only when the header is genuinely tiny does the
split button fold its own primary into the [⋮]
more-menu, leaving just the toggle.
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 (1-3s):
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
Theme Color Variants
pa-btn--color--8- Theme color slot buttonspa-btn--outline-color--8- Outline theme color slot buttons
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__label- Text label wrapper (enables centering with icons)pa-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
Split Buttons
pa-btn-split- Container for split buttonpa-btn-split__toggle- Toggle/chevron buttonpa-btn-split__chevron- Chevron icon (rotates on open)pa-btn-split__menu- Dropdown menu panelpa-btn-split__menu-inner- Inner wrapper (flex layout)pa-btn-split__menu--open- Show dropdown menupa-btn-split__item- Menu item buttonpa-btn-split__item--danger- Destructive action stylingpa-btn-split__item-icon- Menu item icon containerpa-btn-split__item-row- Row with item + inline action buttondata-placement="top-end"- Open menu upward
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+