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)

The pa-btn-split__chevron span draws the masked --pa-icon-chevron (points down, rotates up on open). For a static toggle, omit it and drop any icon element into the toggle instead.

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-actions-priority (default 0) drops first; ties broken by DOM order. Pin "Publish" with data-pa-actions-priority="10", and keep the split button visible longest with data-pa-actions-priority="20". Drag all the way in and even the split button collapses into the [⋮] menu — it lands as an atomic RUN group (its primary plus its own options), not scattered loose.

Drop direction

Default data-pa-actions-overflow-from="end" collapses the rightmost child first. Set data-pa-actions-overflow-from="start" on the .pa-overflow container to collapse the leftmost child first instead.

In card headers

In a card header, use the card-flavored alias .pa-card__actions--overflow on the .pa-card__actions slot itself — the buttons and split button become its direct children (no inner wrapper). It auto-inits like a standalone .pa-overflow, appending its own [⋮] more-menu, and the header title yields before the actions collapse. Laid out three-up (pc-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-overflow is the row; it provides min-width: 0; overflow: hidden; flex-shrink: 1. Works standalone in any flex context; in a card header use the alias .pa-card__actions--overflow on the actions slot itself. Both auto-init — no JS wiring needed.
• overflow.js appends a dedicated [⋮] "more" trigger and, on resize, walks the lowest-priority children (data-pa-actions-priority, default 0) into that trigger's menu until the row fits; higher-priority children survive longer.
• A .pa-btn-split child collapses atomically — its primary action and its own menu items drop into the more-menu together under a section label, nothing foreign mixes in. Give it a high priority (e.g. 20) so it stays visible longest.
• Plain items get their class swapped to pa-btn-split__item while collapsed; the original classList is stashed on the element and restored on the way back out.
• Drop direction is controlled by data-pa-actions-overflow-from on the container: "end" (default — rightmost first) or "start" (leftmost first).
• Click handlers survive — the DOM node moves but is preserved.

Give the button a fixed width (.wr-*) and put .text-truncate on an inner <span> 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

Every button centers its content by default (one model for text-only, icon+label, and icon-only alike). These modifiers are the switch to change it:

• 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 (the default; explicit)
• pa-btn--align-justify - Space-between content

Button Elements

• pa-btn__icon - Icon container (natural width; spaced from the label by the button's gap, so it sits at the padding edge like a text label)
• pa-btn__label - Text wrapper (used by --align-center to flex-fill)
• 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 - Masked --pa-icon-chevron span (points down, rotates to up on open); omit + drop in any icon for a static toggle
• 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
• pa-btn-split__item-icon - Leading icon inside a menu item (fixed column so labels align)
• pa-btn-split__item-row - Menu row wrapping an item + a trailing action button (e.g. delete)
• data-placement="top-end" - Open menu upward (on container)

Overflow Toolbar

• pa-overflow - Progressive-collapse flex row; auto-appends a [⋮] "more" trigger and walks overflowing children into it
• pa-card__actions--overflow - Card-header alias of pa-overflow on the pa-card__actions slot
• pa-overflow__trigger - The auto-created [⋮] button (retheming hook; ships as a standard pa-btn--secondary)
• data-pa-overflow-trigger="ghost" - Make the trigger chromeless instead of bordered (on the container)
• data-pa-actions-priority - Drop order per child (default 0; higher survives longer)
• data-pa-actions-overflow-from - end (default, rightmost first) or start (leftmost first)
• data-pa-overflow-label - Override the section label for a collapsed split-button group
• pa-btn-split--in-overflow / pa-btn-split__group-label - Applied by overflow.js when a split button collapses as an atomic labeled group (not authored by hand)