Various button styles and sizes for actions and navigation.
Variantes de botón
Tamaños de botón
Botones de color del tema
Botones con contorno de color del tema
Botones con contorno
Estados del botón
Botones de bloque
Grupos de botones - Básico
Horizontal (predeterminado)
Vertical
Sin ajuste (evita saltos de línea)
Grupos de botones - Tamaños de espacio
Clases de espaciado semánticas
gap-xs (4px)
gap-sm (8px)
gap-md (12px)
gap-base (16px)
gap-lg (24px)
gap-xl (32px)
Alineación vertical
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
Dirección adaptable
Horizontal → Vertical at md (768px)
Resize window to see change
Vertical → Horizontal at lg (992px)
Starts vertical, becomes horizontal on large screens
Referencia de clases
--sm-vertical/--sm-horizontalat 576px--md-vertical/--md-horizontalat 768px--lg-vertical/--lg-horizontalat 992px--xl-vertical/--xl-horizontalat 1200px
Botones divididos
Acción principal + alternador desplegable combinados en un solo control
Tamaños
Colocación hacia arriba
Use data-placement="top-end"
to open the menu upward. Floating UI will auto-flip if there's not enough space.
Iconos personalizados (sin rotación)
Omit pa-btn-split__chevron
from the icon for static icons that don't rotate on open.
Elementos con acciones
Menu items can include inline action buttons for quick operations like delete.
Barra de herramientas de desbordamiento
Los botones se contraen en un menú dedicado de más [⋮] cuando la fila se queda sin espacio horizontal, y vuelven a aparecer cuando hay sitio
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.
Dirección de arrastre y activador fantasma
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.
En encabezados de tarjeta
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.
Truncamiento de texto
Use .text-truncate
with a fixed width (.wr-*) to truncate long text with ellipsis
Botones con iconos de texto
Buttons with icons are automatically left-aligned with fixed-width icon container:
Botones solo con icono
Icon-only button sizes (XS → XL):
Various colors - default size:
Compact (XS) - perfect for table actions:
With ripple and loading states (click to test):
Botones de ancho fijo
Use minwr-*
+ maxwr-*
to constrain width. Add text-truncate
on an inner span for ellipsis:
Different Widths (minwr-8 to minwr-20)
Alineación del texto del botón
Control text alignment within fixed-width buttons. Note the varied text lengths to show the effect:
En línea alineado al inicio
En línea alineado al final
Alineado al centro
Justificado
Iconos de Font Awesome
Font Awesome icons with varied text lengths to show alignment:
En línea alineado al inicio
En línea alineado al final
Alineado al centro
Justificado
Botones con efecto de onda
Click buttons to see ripple animation effect:
Botones de estado de carga
Click buttons to simulate loading states (1-3s):
Guía de uso
Efecto de onda
Add pa-btn--ripple
class and data-ripple
attribute to any button for click animation feedback.
Estados de carga
Use pa-btn--loading
class to show spinner. JavaScript can toggle this class during async operations.
Buenas prácticas
- 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
Referencia de clases CSS
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+