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.

Drag the resize handle in the bottom-right of the box below to shrink the bar. Lowest data-pa-absorb-priority (default 0) drops first; ties broken by the sibling closest to the split button. Pin "Publish" with data-pa-absorb-priority="10".

Drop direction

Default data-pa-absorb-from="end" drops the sibling nearest the split button first. Set to "start" to drop the leftmost sibling first instead.

In card headers

In a card header the toolbar goes inside .pa-card__actions — the canonical header actions slot — exactly like a plain button row or a .pa-btn-group. .pa-btn-toolbar brings its own flex-shrink: 1/overflow: hidden, and _cards.scss makes the hosting .pa-card__actions shrinkable so the overflow signal still fires. Laid out three-up (pa-col-lg-1-3) so each card is already narrow — resize the browser window to watch each toolbar consume and spit out action buttons live, each collapsing at its own breakpoint.

How it works

• .pa-btn-toolbar wraps the row; provides min-width: 0; overflow: hidden; flex-shrink: 1. Works standalone in any flex context; in a card header, nest it inside .pa-card__actions (which _cards.scss then makes shrinkable).
• .pa-btn-split--auto-absorb opts the split button into auto-absorb. btn-split-auto-absorb.js snapshots its previous siblings at init.
• ResizeObserver on the bar fires relayout(): restore all siblings, check scrollWidth > clientWidth, move siblings into the menu by drop order until it fits.
• Absorbed items get className = 'pa-btn-split__item'; the original classList is stashed on the element and restored on the way back.
• Static menu items (rendered server-side) stay BELOW absorbed items.
• Click handlers survive — the DOM node moves but is preserved.

Use .text-truncate with a fixed width (.wr-*) to truncate long text with ellipsis

Use minwr-* + maxwr-* to constrain width. Add text-truncate on an inner span for ellipsis:

Different Widths (minwr-8 to minwr-20)

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

Button Base

• pa-btn - Base button styling

Button Variants (Colors)

• pa-btn--primary - Primary accent color
• pa-btn--secondary - Secondary/neutral color
• pa-btn--success - Success/green color
• pa-btn--warning - Warning/yellow color
• pa-btn--danger - Danger/red color
• pa-btn--info - Info/blue color
• pa-btn--light - Light background
• pa-btn--dark - Dark background

Outline Variants

• pa-btn--outline-primary - Outline primary
• pa-btn--outline-secondary - Outline secondary
• pa-btn--outline-success - Outline success
• pa-btn--outline-warning - Outline warning
• pa-btn--outline-danger - Outline danger
• pa-btn--outline-info - Outline info
• pa-btn--color-{1-9} - Theme color slots
• pa-btn--outline-color-{1-9} - Outline theme color slots

Button Sizes

• pa-btn--xs - Extra small button
• pa-btn--sm - Small button
• pa-btn--lg - Large button
• pa-btn--xl - Extra large button

Button States & Modifiers

• pa-btn--loading - Loading state with spinner
• pa-btn--ripple - Enable ripple click effect
• pa-btn--block - Full width block button
• pa-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 content
• pa-btn--align-justify - Space-between content

Button Elements

• pa-btn__icon - Icon container with fixed width
• pa-btn__spinner - Loading spinner element

Button Groups

• pa-btn-group - Container for grouped buttons
• pa-btn-group--vertical - Vertical stacking
• pa-btn-group--nowrap - Prevent wrapping

Button Group Alignment (vertical only)

• pa-btn-group--center - Center-align buttons
• pa-btn-group--end - End-align buttons
• pa-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 button
• pa-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 menu
• pa-btn-split__item - Menu item button
• pa-btn-split__item--danger - Destructive action styling
• data-placement="top-end" - Open menu upward (on container)