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

Two patterns. Bookmarks and Recent use an inline action button (a .pa-btn-split__item-row delete) — a row-action isn't the item itself, so clicking it removes the row and the menu stays open on its own. Members instead confirms on the item: the item carries data-pa-keep-open so clicking it (a real menu item, which would otherwise close the menu) keeps it open while the popconfirm is anchored — and the primary button adds a new member.

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.

Last click: nothing yet — click any button, including after it collapses into the [⋮] menu

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 (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-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. Every button above updates the Last click readout, so you can confirm it still fires after collapsing into [⋮] (the per-member delete buttons included).

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 isBlock 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 (the default since core rc06; explicit)
• 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
• 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)
• data-pa-keep-open - On an item (or ancestor): keep the menu open on click, for actions that spawn their own popover

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)